Smooth scrolling easing effect with mouse wheel [

问题:

I recently came across this website http://www.ascensionlatorre.com/home, and I love the way the mouse wheel scrolling works - the easing is very smooth.

I have been searching Google but I can't find anything similar.

Does anybody have any suggestions on how to replicate this effect with jQuery?

回答1:

I recently came across this issue as well and I wasn't finding a lot of support for it, so I quickly forgot about the problem. A few months later I saw a better example of the smooth scrolling so I went in and dug around the JavaScript files they were using and I found that they were using a jQuery file called NiceScroll.

I believe this is what we've both been looking for- simple smooth scrolling for divs, iframes or whatever, much like the iOS scrolling.

http://areaaperta.com/nicescroll/

回答2:

http://areaaperta.com/nicescroll/

that's definitely the script to check out. Although it adds a custom scroll bar, it's a good looking one that you can edit through css.

EDIT I had a working demo but have since removed it due to hosting and domain changes, sorry about that.

回答3:

Okay mate, i'll try helping on ur request with some material. I found this tutorial for myself, hope it will be useful for u too. This forms the basic of the site you are referring to: http://johnpolacek.github.com/scrollorama/

http://johnpolacek.github.com/scrolldeck.js/

回答4:

I have the same question you've asked. I visit the website you provided and I find out the answer!

They used jquery.mousewheel.js, and you can use Chrome's console to find the script. Just search 'mousewheel' and you can find a function called 'scroll'. The reason of the smooth scrolling is that they didn't use jquery's animate, but using javascript's setInternal to make it. You can learn from the code.

I believe you can make it.

回答5:

I haven't dived into the code, but I suspect they're using CSS3 transitions.

transition: all 1s

On your element (vendor prefixed of course), will smooth out the animations from parallax effects.

It seems like they've overridden the scrollWheel behavior and made each tick go down the page by a determined amount. That's how I would approach this at least.