CSS または JavaScript を使用して Web ページのスクロール速度を制御できますか?

CSS または jQuery でスクロール速度を調整できますか?

Web ブラウザーのデフォルトのスクロール速度は、特にマウス ホイールを使用して div を移動する場合に速すぎると感じることがあります。コンテンツ。幸いなことに、JavaScript または jQuery を使用してこのスクロール速度を変更すると、よりスムーズなユーザー エクスペリエンスを実現するように調整できます。

スクロール速度を遅くする

スクロール速度を調整する利点の 1 つは、背景要素が前景要素とは異なる速度で移動する視差などの効果を作成する機能。

JavaScript実装

カスタム スクロール速度を実装するには、以下に示す JavaScript/jQuery アプローチを検討してください。

HTML:

<div>
<p><strong>JavaScript/ jQuery:</strong></p>
<pre class="brush:php;toolbar:false">function wheel(event) {
  var delta = 0;
  if (event.wheelDelta) {
    delta = event.wheelDelta / 120;
  } else if (event.detail) {
    delta = -event.detail / 3;
  }

  handle(delta);
  if (event.preventDefault) {
    event.preventDefault();
  }
  event.returnValue = false;
}

function handle(delta) {
  var time = 1000;
  var distance = 300;

  $('html, body').stop().animate({
    scrollTop: $(window).scrollTop() - (distance * delta)
  }, time);
}

if (window.addEventListener) {
  window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;

このスクリプトは jQuery を使用しますデルタの値に基づいてスクロール速度を制御し、マウス ホイールで移動する速度と距離を調整できます。 stop() メソッドと animate() メソッドは、スムーズなスクロール効果を提供します。

結論

スクロール速度の変更はすべての状況に適用できるわけではありませんが、ユーザー エンゲージメントを高めるための貴重なテクニックになる可能性があります。視覚的に魅力的な効果を作成します。 JavaScript アプローチを使用すると、特定の設計目標に合わせて速度やその他のパラメーターをカスタマイズできます。