jquery - 慢速向下滚动

标签 jquery html css scroll

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

我知道更改网站的滚动速度很糟糕,但我需要为一个与其说是网站,不如说是游戏的网站这样做。

谁能告诉我如何降低滚动速度? Jquery 还是 CSS?

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

最佳答案

看这个 fiddle :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>

关于jquery - 慢速向下滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23950450/

相关文章:

javascript - 如何根据其值更改下拉列表值样式?

javascript - jQuery如何将一个元素的所有内容替换为另一个元素?

html - table 头周围的边框

javascript - 使用 javascript 从网页中删除不需要的 html 内容

jquery - 如何使用 MVC5 中的 Enter Key 功能从一个字段导航到另一个字段

python - 在 Django 中实现 HTML 和 CSS

html - 向 Bootstrap 列添加小的左边距时防止 y 溢出

c# - 动态加载html代码

javascript - PHP中从ajax数组中获取数据

javascript - 在 Javascript/jQuery 中确定字符串的像素长度?