如何使鼠标滚轮滚动到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屋！