كيف أتحكم بسرعة السكرول ؟

Hadi Hasan · 3 سبتمبر 2022

وضعت رابط ضمن صفحة الويب لينتقل إلى الموضوع ضمن نفس الصفحة , ولينتقل ببطء وضعت سمة scroll-behavior:smooth .

هل يمكن التحكم بسرعة السكرول ليكون أبطأ مثلاً كما نتحكم ببعض الميزات بواسطة : transition أو animation ?

عمر قره محمد · 3 سبتمبر 2022

يمكن تنفيذ الـ scroll الذي تتحدث عنه باستخدام JS،

لاحظ المثال التالي :

<a href="#" id="myBtn">رابطي</a>
<div style="height: 2000px">عبارة عن قسم طويل جداً</div>
<div id="myTarget">العنصر المستهدف</div>
<script>
  // اربط العنصر المستهدف بالرابط الخاص بك وحدد الزمن التي تريد ان تستغرقه العملية
  document.getElementById("myBtn").onclick = function (e) {
    e.preventDefault();
    const myTarget = document.getElementById("myTarget");
    scrollTo(myTarget, 10000); // ستحتاج 10 ثواني للوصول إلى العنصر المستهدف
  };

  function scrollTo(element, duration) {
    var e = document.documentElement;
    if (e.scrollTop === 0) {
      var t = e.scrollTop;
      ++e.scrollTop;
      e = t + 1 === e.scrollTop-- ? e : document.body;
    }
    scrollToC(e, e.scrollTop, element, duration);
  }

  function scrollToC(element, from, to, duration) {
    if (duration <= 0) return;
    if (typeof from === "object") from = from.offsetTop;
    if (typeof to === "object") to = to.offsetTop;

    scrollToX(element, from, to, 0, 1 / duration, 20, easeOutCuaic);
  }

  function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
    if (t01 < 0 || t01 > 1 || speed <= 0) {
      element.scrollTop = xTo;
      return;
    }
    element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
    t01 += speed * step;
    debugger;
    setTimeout(function () {
      scrollToX(element, xFrom, xTo, t01, speed, step, motion);
    }, step);
  }

  function easeOutCuaic(t) {
    t--;
    return t * t * t + 1;
  }
</script>

كما يمكنك تنفيذ الوظيفة نفسها باستخدام الوظيفة animate في jQuery.

Kais Hasan · 3 سبتمبر 2022

هناك طريقة و هي القيام بجعل الصفحة أبعد و بالتالي يبدو ال scroll أبطئ، كمثال على ذلك من الواقع فإنك ترى الطائرة في السماء و كأنها بطيئة و تشعر بأن سيارة قربك أسرع منها و لكن ذلك نتيجة وهم المسافة.

و بالتالي يمكن القيام بنفس الأمر مع الموقع عن طريق دفعه إلى الخلف باستعمال الخاصية transform و طبعا سنضطر إلى القيام ب scale للموقع ﻷنه سيبدو أصغر.

يمكن القيام بذلك بالشكل التالي:

<body>
  <div class="scroll">
    <div class="scroll2">
      ...
    </div>
  </div>
</body>

body {
  padding: 0;
  overflow: hidden;
}

.scroll {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden; 
  perspective: 1px;
  transform-style: preserve-3d
}

.scroll2 {
  transform: translateZ(-1px) scale(2);
}

كيف أتحكم بسرعة السكرول ؟

السؤال

Hadi Hasan

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Kais Hasan

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية