使用 overflow-y:scroll 在窗口上优先滚动 div

Question

我正在开发一个使用 html5、css 和 javascript 的移动应用程序，该应用程序使用并排滚动，并且由于 -webkit-overflow-scrolling:touch 与我正在使用的 div 内的固定元素交互的方式存在一些问题

.scroller {
    position: fixed;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

对于我的左侧滚动和简单地使用右侧滚动窗口。

当滚动到左侧的顶部或底部时，或者如果右侧仍在移动设备上滚动，则将使用窗口而不是具有滚动器类的左侧。

我想知道是否有类似于 z-index 的东西，它允许在滚动或单击时始终优先考虑固定元素，而不是转到外部元素。

在浏览器中发生这种情况的一个例子是滚动到固定元素的底部，然后即使您仍在固定元素内部滚动，外部元素也会滚动。

我希望滚动只滚动固定元素而不更改外部元素，而不检查它是否位于固定元素底部的顶部。

这是我目前如何设置的小提琴： http://jsfiddle.net/y1hjhLde/2/

这是我希望交互看起来如何的小提琴，但右侧不能有一个溢出-y：滚动滚动。 http://jsfiddle.net/y1hjhLde/3/

我希望解决方案在 css 中，但如果有某种方法可以在 javascript 中执行此操作，那将是可以接受的。

Answer 1

我不确定这是否是您的意思，但如果.scroller div 不在其自己的滚动条的底部，这是一个关于如何防止窗口向下滚动的 Jquery 方法。

var prevVal = $(window).scrollTop();
$(window).on("scroll", function(event) {
    var elem = $(".scroller");
    if($(window).scrollTop() > prevVal) {
        if (elem[0].scrollHeight - elem.scrollTop() != elem.outerHeight()) {
            $(window).scrollTop(prevVal);
        }
    }
    prevVal = $(window).scrollTop();
});

这是一个小提琴：http://jsfiddle.net/y1hjhLde/8/

编辑

根据需要设置条件的逻辑。您可以进行的验证是：

• if($(window).scrollTop() > prevVal) - 表示正在尝试向下滚动主窗口

• if($(window).scrollTop() < prevVal) - 表示正在尝试向上滚动主窗口

• if(elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) - 表示内容滚动到自己的底部

• if(elem.scrollTop() == 0) - 表示内容滚动到自己的顶部

• $(window).scrollTop(prevVal); - 是窗口不滚动的指令