如何让鼠标滚轮滚动到 mediafire.com 中的部分 [英] How to make mouse wheel scroll to section like in mediafire.com

问题描述

我看到了这个网站的主页 http://www.mediafire.com/，在当您滚动鼠标滚轮时，页面会自动定位到页面中的下一部分.我想知道它是怎么做的.谁能帮我这个.提前致谢.

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.

问候，阿斯温

推荐答案

我认为这种类型的动画可能很难接受，尤其是对于 jQuery 的新手.这涉及滚动、捕捉鼠标滚轮事件、动画延迟，最重要的是让它在跨浏览器和移动浏览器的滑动和触摸事件上正常工作.如果您没有扎实的理解，我建议您使用插件.这两个是最好的:一页滚动和整页.

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 Scroll and Full Page.

我只能向您展示如何在跨浏览器上完成此操作的基本方法，如果您希望它在移动设备上正常运行，您应该尽自己的一份力量并添加滑动和触摸事件.:)

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

    }
});

这是一个演示:jsfiddle.net/NGj7F/

Here is a demo: jsfiddle.net/NGj7F/

这篇关于如何让鼠标滚轮滚动到 mediafire.com 中的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！