jQuery的垂直鼠标滚轮平滑滚动

问题描述：

我正在做的视差网站，我想与鼠标滚轮为更好的用户体验，使页面滚动平滑。我可以得到的最好的例子是这个网站：http://www.milwaukeepolicenews.com/#menu=home-page 如果我能得到类似于我的网站的东西，平滑的垂直滚动和滚动惯性，这将是非常好的。jQuery的垂直鼠标滚轮平滑滚动

我发现他们使用的布兰登·艾伦的jQuery的鼠标滚轮，这是非常轻，但我只是一个初学者，不能让它通过自己的工作。

此外，我在他们的MPD-parallax.js注意到了这一点：

jQuery(window).mousewheel(function(event, delta, deltaX, deltaY){ 
     if(delta < 0) page.scrollTop(page.scrollTop() + 65); 
     else if(delta > 0) page.scrollTop(page.scrollTop() - 65); 
     return false; 
    })

谢谢！

编辑

我几乎没有。看看这个小提琴：http://jsfiddle.net/gmelcul/cZuym/只需要添加一个宽松的方法来滚动就像密尔沃基警察局网站。

显示你迄今为止尝试过 - 它很难提出建议，否则。 – 2013-02-16 01:19:49

它真正需要放松，它有点在Firefox和Chrome生涩，但奇怪的是它的工作原理非常好，顺利的IE10。 – 2013-02-16 03:57:04

可能的重复：http://*.com/questions/9142490/smooth-scrolling-easing-effect-with-mouse-wheel?lq=1 – 2013-04-02 02:33:00

答

这里有两个jsfiddles - 一个用脚本和一个没有它，这样你可以比较：

with script
without script

JavaScript的使用jQuery mousewheel plugin：

$(document).ready(function() { 
    var page = $('#content'); // set to the main content of the page 
    $(window).mousewheel(function(event, delta, deltaX, deltaY){ 
     if (delta < 0) page.scrollTop(page.scrollTop() + 65); 
     else if (delta > 0) page.scrollTop(page.scrollTop() - 65); 
     return false; 
    }) 
});

比较两个。从我所知道的情况来看，这个脚本减慢了鼠标滚轮的速度，因此它需要更多的物理轮转才能在没有脚本的情况下滚动相同的距离。由于较慢的滚动，它可能感觉更平滑（并且它可能确实更平滑，因为在图形单元上它可能更容易）。

明白了，谢谢Cymen！ – 2013-02-16 03:33:59

@gigimelcul酷如果它适合你，请接受（绿色复选标记）！ – Cymen 2013-02-16 05:30:53

您也可以使用箭头键进行滚动（使用箭头键以及鼠标滚轮进行滚动会更方便用户使用）。 http://jsfiddle.net/aVvQF/4/ – 2013-04-02 02:39:55

答

退房skrollr。这是一个创建视差效果的插件。它有自己的选择，当你初始化插件切换平滑滚动：

var s = skrollr.init({ 
    smoothScrolling: true, 
    smoothScrollingDuration: 1800 
});

寻找很长的....谢谢你.... – Hareesh 2014-09-12 08:37:27

这看起来很有前途。谢谢！ – OMA 2015-01-18 20:40:04

答

我发现这个插件，它有一些很不错的选择，并适用于所有主要设备http://areaaperta.com/nicescroll/

它不仅仅是平滑滚动过程。它还为页面添加了一个很好的自定义滚动条。缺点：比其他更简单的平滑滚动实现要慢，而且尺寸也稍大一些。 – BlackPanther 2015-02-06 14:25:30

不平滑。它会导致页面在您滚动时摇晃。绝对可怕！ – 2015-04-21 15:56:41

答

嘿，我来到这里的另一个的ressource这是真的简单易用smoothwheel

它可以在每个设备上的鼠标滚轮上进行平滑滚动动画，并且完美地工作！

不幸的是，无论是在SmoothWheel站点的演示还是在Chrome 39中最终链接的“工作演示”都无法在Chrome 39上运行。滚动轮仍然是常规块跳跃。另一方面，上面提到的“skrollr”库在Chrome 39中工作 – OMA 2015-01-18 20:39:41

答

我知道这是一个非常古老的职位，但这里是一个很好的解决方案，我提出：

function handle(delta) { 
    var animationInterval = 20; //lower is faster 
    var scrollSpeed = 20; //lower is faster 

    if (end == null) { 
    end = $(window).scrollTop(); 
    } 
    end -= 20 * delta; 
    goUp = delta > 0; 

    if (interval == null) { 
    interval = setInterval(function() { 
     var scrollTop = $(window).scrollTop(); 
     var step = Math.round((end - scrollTop)/scrollSpeed); 
     if (scrollTop <= 0 || 
      scrollTop >= $(window).prop("scrollHeight") - $(window).height() || 
      goUp && step > -1 || 
      !goUp && step < 1) { 
     clearInterval(interval); 
     interval = null; 
     end = null; 
     } 
     $(window).scrollTop(scrollTop + step); 
    }, animationInterval); 
    } 
}

测试：http://jsfiddle.net/y4swj2ts/3/

jQuery的垂直鼠标滚轮平滑滚动

相关推荐