优先使用div-y在div中滚动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%;
}

对于我的CSS在左侧滚动，而只是使用窗口进行右侧滚动。

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

我想知道是否存在类似于z-index的东西，当滚动或单击而不是转到外部元素时，始终允许对固定元素进行优先排序。

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

我希望滚动仅滚动固定元素，而根本不更改外部元素，而无需检查它是否在固定元素底部的顶部。

这是我当前设置方式的小提琴： http : //jsfiddle.net/y1hjhLde/2/

这是我想让交互看起来像什么的小提琴，但右侧没有溢出y：scroll进行滚动。 http://jsfiddle.net/y1hjhLde/3/

我希望解决方案在CSS中，但是如果有某种方法可以在javascript中做到这一点，那是可以接受的。

Answer 1

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

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); -是窗口不滚动的指令