Question

我有一个内部元素，它具有固定的高度和宽度，并设置了overflow-y: scroll;。

我想首先使用主浏览器滚动条滚动内部元素的内容，然后在到达内部元素内容底部后继续滚动页面的其余部分。

有没有办法在jQuery或JavaScript中执行此操作？

Answer 1

有没有办法在JavaScript中执行此操作！？天空是极限！虽然它可能不是您正在寻找的。不幸的是，你不能劫持“滚动”事件 - 它是不可取消的。

然而，您可以通过鼠标滚轮拦截滚动 - 这也是大多数人滚动的方式。另一种选择是创建自己的Scrollbar库......但这非常耗时。

（顺便说一句，我已经这样做了，你可以自由地使用它并随意使用它：http://code.fashionablydrab.com/fsb/。但这就像5年前一样，所以如果你有任何问题，那么“操作方法”部分涵盖的范围，您自己。）

无论如何，回到ol'“mousewheel”事件。你猜怎么着？它没有标准化！所以每个浏览器都有自己的方式。 Firefox已经开始使用具有deltaX和deltaY属性的新“轮”事件，他们同意Chrome / IE的“鼠标滚轮”事件的deltaX和deltaY，因此您无需处理整个“细节”问题。

这是一个小提琴：http://jsfiddle.net/bhn58xzx/1/

var scrollInfo = {
    element: document.querySelector("#scroll")
};

var wheelEvent = document.onmousewheel !== undefined ? "mousewheel" : "wheel";

function interceptWheel(e) {
    if (e.currentTarget === scrollInfo.element) {
        return;
    }
    var st = scrollInfo.element.scrollTop,
        inc = e.deltaY;

    if (e.type === "wheel") {
        inc *= 100;
    }

    scrollInfo.element.scrollTop += inc

    if (st !== scrollInfo.element.scrollTop) {
        e.preventDefault();
    }

    document.querySelector("#out").innerHTML = e.deltaY;
};

document.body.addEventListener(wheelEvent, interceptWheel, false);

请注意，在向上和向下滚动时它很有效（在修改scrollTop之前，只需检测e.deltaY是正/负）。

如果您需要支持旧浏览器，那么祝您好运;）

使用主浏览器滚动条滚动内部元素

1 个答案: