jQuery 如何让鼠标滚轮滚动到 mediafire.com 中的部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21450095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make mouse wheel scroll to section like in mediafire.com
提问by winnyboy5
I came across the home page of this website http://www.mediafire.com/, in which when you roll the mouse wheel the page position itself automatically to the next section in the page. I like to know how its done. Can anyone help me with this. Thanks in advance.
我遇到了这个网站的主页http://www.mediafire.com/，当你滚动鼠标滚轮时，页面会自动定位到页面的下一部分。我想知道它是怎么做的。谁能帮我这个。提前致谢。
Regards, Aswin
问候， 阿斯温
回答by Mark S
I think this type of animation is probably hard to take in especially someone new to jQuery. This involves scrolling, catching the mousewheel events, delay in animations, and most of all getting it to work properly on cross browsers and on mobile browsers' swipe and touch events. If you don't have a solid understanding I would suggest you to use a plugin. These two are the best: One Page Scrolland Full Page.
我认为这种类型的动画可能很难被 jQuery 新手接受。这涉及滚动、捕捉鼠标滚轮事件、动画延迟，最重要的是让它在跨浏览器和移动浏览器的滑动和触摸事件上正常工作。如果您没有扎实的理解，我建议您使用插件。这两个是最好的：一页滚动和整页。
I can only show you the basic method on how to get this done on cross browsers, if you want it to work properly on mobile you should do your part and add the swipe and touch events. :)
我只能向您展示如何在跨浏览器上完成此操作的基本方法，如果您希望它在移动设备上正常工作，您应该尽自己的一份力量并添加滑动和触摸事件。:)
//Set each section's height equals to the window height
$('section').height($(window).height());
/*set the class 'active' to the first element
this will serve as our indicator*/
$('section').first().addClass('active');
/* handle the mousewheel event together with
DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('section.active');
//get the delta to determine the mousewheel scrol UP and DOWN
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
//mousewheel down handler
next = active.next();
//check if the next section exist and animate the anchoring
if (next.length) {
/*setTimeout is here to prevent the scrolling animation
to jump to the topmost or bottom when
the user scrolled very fast.*/
var timer = setTimeout(function () {
/* animate the scrollTop by passing
the elements offset top value */
$('body, html').animate({
scrollTop: next.offset().top
}, 'slow');
// move the indicator 'active' class
next.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
} else {
//mousewheel up handler
/*similar logic to the mousewheel down handler
except that we are animate the anchoring
to the previous sibling element*/
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: prev.offset().top
}, 'slow');
prev.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
}
});
Here is a demo: jsfiddle.net/NGj7F/
这是一个演示：jsfiddle.net/NGj7F/
