jquery vertical mousewheel smooth scrolling

时光怂恿深爱的人放手 提交于 2019-11-26 15:48:09

问题


I'm making a parallax website and I would like to make the page scroll smoother with the mousewheel for a better user experience. The best example I could get was this website: http://www.milwaukeepolicenews.com/#menu=home-page It would be great if I could get something similar to that into my website, the smooth vertical scrolling and scroll inertia.

I noticed they are using Brandon Aaron's jQuery mousewheel which is very light but I'm just a beginner and cannot make it work by myself.

Also i noticed this in their 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;
    })

Thank you!

EDIT

I'm almost there. Take a look at this fiddle: http://jsfiddle.net/gmelcul/cZuym/ It only needs adding an easing method to scroll just like the Milwaukee Police website.


回答1:


I know it's a really old post, but here is a good solution I made :

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);
  }
}

Test it : http://jsfiddle.net/y4swj2ts/3/




回答2:


Here are two jsfiddles -- one with the script and one without it so you can compare:

  • with script
  • without script

JavaScript using the 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;
    })
});

Compare the two. From what I can tell, the script slows the mouse wheel so it requires more physically turning to scroll the same distance as without the script. It may feel smoother because of that slower scrolling (and it may indeed be smoother as it is probably easier on the graphics unit).




回答3:


Check out skrollr. It's a plugin to create the parallax effect. It has options when you initialize the plugin to toggle smooth scrolling:

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



回答4:


hey I got another ressource here which is really simple to use smoothwheel

It enable a smooth scroll animation on mousewheel on every devices and work perfectly !




回答5:


I found this plugin, it has some nice options and works on all major devices http://areaaperta.com/nicescroll/



来源:https://stackoverflow.com/questions/14905779/jquery-vertical-mousewheel-smooth-scrolling

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!