web-dev-qa-db-ja.com

cssまたはjQueryを使用してスクロール速度を変更できますか？

以下の例では、特にマウスホイールを使用しているときに、divのコンテンツのスクロール速度を下げたいと思います。これは、1つのホイールティックがほぼdivの高さまでスクロールするためです。

CSSで制御することは可能ですか？そうでない場合はjavascript（おそらくjQueryを使用して）？

.scrollable {
    width: 500px;
    height: 70px;
    overflow: auto; 
}
<div class="scrollable">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>

注： os/browersとブラウザ設定でスクロール速度が異なる可能性があることを認識しています。しかし、ほとんどの場合、スクロール速度（マウスホイールを使用する場合）は速すぎると思うので、遅くしたいと思います。

jquerycssscroll
39
Benjamin Crouzier

スクロール速度は、javascript（またはjQueryなどのjsライブラリ）を介して、上記のすべてを変更、調整、反転することができます。

なぜこれをしたいのですか？視差はその理由の1つにすぎません。誰もそうすることに反対する理由がわからない-DIVの非表示、要素の上下へのスライドなどに対して同じ否定的な議論ができる。ウェブサイトは常に技術的機能とUXデザインの組み合わせであるUXを改善するほぼすべての技術的能力。それが彼/彼女を良くするものです。

Toni Almeida ポルトガルの素晴らしいデモを作成しました。以下に再現します。

jsFiddle Demo

HTML：

<div id="myDiv">
    Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. <span class="boldit">Use the mouse wheel (not the scroll bar) to scroll this DIV. You will see that the scroll eventually slows down, and then stops. </span>
</div>

javascript/jQuery：

  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;

ソース：

ウェブページのデフォルトのスクロール速度、スクロール量、スクロール慣性を変更する方法

74
cssyphus

いいえ。スクロール速度はブラウザによって決定されます（通常、コンピューター/デバイスの設定によって直接決定されます）。 CSSとJavascriptには、システム設定に影響を与える方法はありません（またはすべきではありません）。

そうは言っても、次のような方法でコンテンツを移動することで、異なるスクロール速度fakeを試みることができるいくつかの方法がありますスクロールに対抗します。しかし、そうすることは[〜＃〜] horrible [〜＃〜]使いやすさの観点から考えている、アクセシビリティ、およびユーザーへの敬意がありますが、スクロールを示すターゲットブラウザが起動するイベントを見つけることから始めます。

スクロールイベントをキャプチャできると（可能な場合）、必要な部分が表示されるようにコンテンツを動的に調整できます。

別のアプローチは、これをFlashで処理することです。doesは少なくともsomeスクロールイベントの制御レベル。

15
cdeszaq

このjsファイルを使用してください。 （異なるjsファイルを使用した2つの例に言及しました。2番目の例が必要なものであることを願っています）パラメーターを変更することで、スクロール量、速度などを簡単に変更できます。

https://github.com/nathco/jQuery.scrollSpeed

デモ

this を試すこともできます。 デモ

7
anu g prem

そのコードに基づいて純粋なJavaScript関数を作成しました。 Javascriptのみのバージョンのデモ： http://jsbin.com/copidifiji

それはjQueryから独立したコードです

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

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(sentido) {
    var inicial = document.body.scrollTop;
    var time = 1000;
    var distance = 200;
  animate({
    delay: 0,
    duration: time,
    delta: function(p) {return p;},
    step: function(delta) {
window.scrollTo(0, inicial-distance*delta*sentido);   
    }});}

function animate(opts) {
  var start = new Date();
  var id = setInterval(function() {
    var timePassed = new Date() - start;
    var progress = (timePassed / opts.duration);
    if (progress > 1) {progress = 1;}
    var delta = opts.delta(progress);
    opts.step(delta);
    if (progress == 1) {clearInterval(id);}}, opts.delay || 10);
}
4
user3768564