鼠标滚轮速度

时间:2017-04-13 05:09:35

标签: javascript

我正在使用此代码将滚动绑定到页面上的特定元素。是否可以改变滚动的速度?我尝试使用“动画”,但没有用。

    (function() {
  var delay = false;

  $(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},100)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('section');
    if(wd < 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }
    $('html,body').animate({
      scrollTop: a[i].offsetTop
    });
  });
})();

2 个答案:

答案 0 :(得分:1)

尝试按如下方式更新Animate方法。

 $('html,body').animate({
  scrollTop: a[i].offsetTop
}, 500);

答案 1 :(得分:0)

使用Nicescroll插件

&#13;
&#13;
 $(document).ready(function() {    
	
	$("#divexample1").niceScroll();
	
  });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>

<div class="txtblock">
<h1> Simple scrollable div</h1>

<div id="divexample1">
    1 Fermat's conjecture (History)<br />
    2 Mathematical context<br />
    2.1 Pythagorean triples<br />
    2.2 Diophantine equations<br />
    3 Fermat's conjecture<br />
    4 Proofs for specific exponents<br />
    5 Sophie Germain<br />
    6 Ernst Kummer and the theory of ideals<br />
    7 Mordell conjecture<br />
    8 Rational exponents<br />
    9 Computational studies<br />
    10 Connection with elliptic curves<br />
    11 Wiles' general proof<br />
    12 Did Fermat possess a general proof?<br />
    13 Monetary prizes<br />
    14 In popular culture<br />
    15 See also<br />
    16 Notes<br />
    17 References<br />
    18 Bibliography<br />
    19 Further reading<br />
    20 External links
  </div>
</div>
&#13;
&#13;
&#13;