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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية