慢滚动速度下降

时间:2014-05-30 08:45:38

标签: jquery html css scroll

好的,所以我找不到任何相关信息。

我知道更改网站的滚动速度很糟糕,但我需要为一个比网站更多的游戏网站执行此操作。

有人可以告诉我如何减速de scrollspeed? Jquery还是css?

编辑:我想改变滚动速度的人们用鼠标滚轮滚动。

4 个答案:

答案 0 :(得分:11)

看看这个小提琴:http://jsfiddle.net/promatik/NFk2L/,你可以设定时间和距离!

JS代码

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(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;

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);
}
#myDiv {
  height: 800px;
  width: 100px;
  background-color: #CCF;
  font-family: 'Trebuchet MS';
  font-size: 12px;
  line-height: 24px;
  padding: 5px;
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="myDiv">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

答案 1 :(得分:7)

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

Demo

您可以在此代码中添加值速度

答案 2 :(得分:6)

NiceScroll插件

<强>的jQuery

$(document).ready(function() { 

    $("html").niceScroll();

  }

);

答案 3 :(得分:-6)

只需转到控制面板中的Windows鼠标属性,即可通过一个滚动设置要滑过的页面数量。