在绝对定位的元素下方滚动 DIV答案

【问题标题】：Scrolling a DIV beneath an absolutely postitioned element在绝对定位的元素下方滚动 DIV
【发布时间】：2014-10-02 17:41:45
【问题描述】：

我有一个简单的网站，其中包含可滚动的div。它工作正常，但我还需要一个绝对定位的div 在它的顶部——我仍然需要它来滚动，就好像它不存在一样。

你可以在这里看到一个粗略的 JSFiddle：http://jsfiddle.net/41rawrks/

您可以使用鼠标滚轮（或触控板）滚动div，但如果光标移到其他元素上（如下所示），您将无法再滚动。我可以更改吗？

我想这是因为一旦光标碰到可拖动元素，DOM 不再认为光标“在”可滚动元素“上方”（即使可拖动元素绝对位于可滚动元素内）。

我能做什么？

我不认为这是可能的，但这个网站做到了！

http://weareeli.dk

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

如果您将溢出从 #scrollDiv80s 切换到其父 #wrapper80s，它会按您的意愿工作：

#scrollDiv80s div {
    border: 1px solid black;
}
#wrapper80s, #wrapper90s, #wrapper00s {

    overflow-y: scroll; /* look at this */
    overflow-x: hidden; /* look at this */
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}
.decadeHeader {
    background-color: red;
    position: absolute;
    width: 100%;
    z-index: 99999;
    font-size: 28px;
    text-align: center;
}
.decadeHeader:hover {
    cursor: grab;
    cursor: -webkit-grab;
}
#scrollDiv80s  {
    /* overflow from child removed */
    border: none;
    height: 100%;
}

【讨论】：

很好，但它似乎摆脱了计算？ :-/ jsfiddle.net/f57bbv3g/2

【解决方案2】：

解决方案是混合了已经提到的所有内容。

pointer-events: none 阻止了滚动卡住，但阻止了拖动选项的工作。答案是仅在列不滚动时才将pointer-events: none 添加到可拖动元素。

监控滚动事件（没有鼠标点击）很容易，但我使用jQuery debounce 来检测滚动何时停止。

scrollers.scroll($.debounce( 250, function(){
    // Re-enable drag event
    $(this).next('.decadeHeader').css('pointer-events', 'auto');
}));

简单的解决方案，效果很好！

【讨论】：

【解决方案3】：

.decadeHeader 从不滚动，因此它可以将滚动事件传递给下面的元素。您需要向 .decadeHeader 添加一些子项才能使其正常工作。比如：

只需在您的 html 中包含来自 https://github.com/TNT-RoX/android-swipe-shim 的脚本“_ezswipe.js”。

<script src="_ezswipe.js" type="text/javascript"></script>

然后将“_ezswipe”类添加到

<div class="decadeHeader ui-draggable ui-draggable-handle _ezswipe">

最后添加一些代码来传递事件。

function catchEvent(e) {
    document.querySelector('#scrollDiv80s').scrollTop += (e.detail.delta.y*-1);
}
var el = document.querySelector("._ezswipe");
el.addEventListener("swipeMove", catchEvent, true);

Fiddle here http://jsfiddle.net/41rawrks/7/

【讨论】：

感谢您的帮助！我一直在关注你，直到你说“然后在你的 JavaScript 中，将 #scrollsurface 居中并将滚动事件传递给下面的元素。”我不知道如何将滚动事件传递给下面的元素：-/
@Chuck 它可能需要为您的实例调整 600% 的高度，这是为了克服 android 设备上的滑动问题。每晚在 Firefox 上运行良好。
我还会考虑在滚动期间禁用“指针事件”，正如@iamdash 所说，并在滚动停止时重新启用，以获得更流畅的用户体验。
哇。我真的很感激你的努力，但你的小提琴不起作用......如果你从 DRAG ME 框上的光标开始滚动仍然不起作用。另外，拖动 DRAG ME 框的功能已停止工作。不过，感谢您的所有努力！
@Chuck 你用的是什么浏览器？在 Firefox 中运行良好。

【解决方案4】：

您可以将 CSS 中的 pointer-events: none 添加到阻塞元素（我认为 IE10 及以下版本不支持）或尝试将 e.preventDefault 添加到该元素上的 mouseenter/mouseover 事件。

【讨论】：