Javascript 使用overflow-y在div中按优先级滚动：在窗口上滚动

我正在使用html5、css和javascript开发一个移动应用程序，该应用程序使用并排滚动，并且由于webkit溢出滚动的一些问题：touch与我正在使用的div中的固定元素交互

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

对于我的css，在左侧滚动，只需使用窗口进行右侧滚动

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

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

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

我想滚动只滚动固定元素，而不改变任何外部元素，而不检查它是否在固定元素底部的顶部

下面是我目前如何设置它的一把小提琴：

这里有一个小提琴，我希望互动看起来像，但不能有一个溢出-y：滚动右侧滚动滚动。

---

我更喜欢css的解决方案，但如果有某种方法可以在javascript中实现这一点，那将是可以接受的。

我不确定这是否是您的意思，但这里有一个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();
});

这是一把小提琴：

编辑

根据需要设置条件的逻辑。您可以执行的验证包括：

• if（$（window）.scrollTop（）>prevVal）

  -表示正在尝试向下滚动主窗口

• if（$（window.scrollTop（）

  -表示正在尝试向上滚动主窗口

• if（elem[0].scrollHeight-elem.scrollTop（）==elem.outerHeight（））

  -表示内容被滚动到自己的底部

• if（elem.scrollTop（）==0）

  -表示内容被滚动到自己的顶部

• $（窗口）.scrollTop（prevVal）-指示窗口不滚动
  

---

感谢您的回复，但我希望当.scroller div位于其内容的顶部或底部时，窗口不要滚动。浏览器没有我试图在移动设备上修复的问题，但最接近在浏览器上复制它意味着我无法使用.scroller div的高度来禁用窗口中的滚动来解决此问题。我主要想知道是否有某种方法可以始终对.scroller div中的事件进行优先级排序，并且从不默认为窗口。不需要太多更改。检查我的最新答案，并提出你自己的逻辑，如你所愿…不是真的。。。滚动是浏览器的默认行为。。。通过捕获滚动事件并威胁它，您只能通过Javascript覆盖它的行为…谢谢，我将尝试在.scroller div上使用getBoundingClientRect，然后捕获触摸事件坐标并检查rect是否包含坐标。