jquery - jquery阻止正常滚动和动画

Question

基本上我正在寻找一种方法来重新创建这个网站上的滚动功能

问题是当您开始滚动时，页面不会像往常一样滚动，但它会注意到您的滚动命令并为垂直页面移动设置动画。有人知道如何在 jQuery 中重新创建该功能吗？

我认为这将是关于e.preventDefault();何时$(window).scroll()然后执行根据窗口高度向上或向下滑动当前 div 的动画。

score 5 · Accepted Answer

好的，我做了一些应该满足您需求的东西：

var page = $("div.page");
var heights = [];
var index = 0;

page.each(function(i){
    heights[i] = $(this).offset().top;
});

$(document).on('DOMMouseScroll mousewheel', function(e, delta) {
    // normalize the wheel delta
    delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120;

    // do nothing if is already animating
    if($("html,body").is(":animated")) return false;

    // increase the page index based on wheel direction
    index = (index-delta) % (heights.length);

    // animate the scrolling
    $("html,body").stop().animate({
        scrollTop: heights[index]
    }, 1000);

    e.preventDefault();
});

http://jsfiddle.net/ARTsinn/7TKmc/2/

score 1 · Accepted Answer

如果您在这里查看他们的 js 文件：http: //beoplay.com/layouts/SBV-Custom/HMProductPage/js/src/BeoplayA9_min.js

如果您将其取消缩小并查看从第 3444 行开始的代码 - 您会看到他们正在使用jQuery.event.fixHooks来创建和响应自定义事件 ( ["DOMMouseScroll", "mousewheel"])。

然后他们能够读取鼠标滚轮的移动并基于此手动滚动页面。

如果你抓住页面的滚动条，滚动会正常发生——所以它只是“动画垂直页面移动”的鼠标滚轮。

score 0 · Accepted Answer

我会这样做：

使用鼠标滚轮插件，我推荐这个插件。
绑定mousewheel到htmlor body。 $('body').bind('mousewheel', function(event, delta) {})
演示：http: //jsbin.com/ukotit/48/edit
基于delta(1 = up, -1 = down)，使用.animate()and .scrollTop()。

希望这可以帮助！

jquery - jquery阻止正常滚动和动画

3 回答 3

Related

Reference