Question

我正在使用html5，css和javascript进行移动应用程序，它使用并排滚动，并且由于-webkit-overflow-scrolling的一些问题：touch与div中的固定元素交互I我正在使用

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

我左侧的css滚动，只需使用右侧滚动窗口。

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

我想知道是否存在类似于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); - 是不滚动窗口的说明

优先使用overflow-y在div中滚动：滚动窗口

1 个答案: