jquery - 如何让鼠标滚轮滚动到 mediafire.com 中的部分

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 9 年前。

Improve this question

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

问候，阿斯温

Answer 1

我认为这种类型的动画可能很难接受，尤其是对于 jQuery 新手来说。这涉及滚动、捕获鼠标滚轮事件、动画延迟，最重要的是让它在跨浏览器以及移动浏览器的滑动和触摸事件上正常工作。如果您没有充分的了解，我建议您使用插件。这两个是最好的:One Page Scroll和 Full Page .

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

//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/