Question

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

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

您可以使用鼠标滚轮（或触控板）滚动div，但如果光标越过其他元素（如下所示），则无法再滚动。我能改变一下吗？

enter image description here

我想象一下，因为DOM不再认为光标是＆＃34; over＆＃34;可滚动元素一旦击中可拖动元素（即使可拖动元素绝对位于可滚动元素内）。

我该怎么办？

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

http://weareeli.dk

Answer 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%;
}

Answer 2

.decadeHeader永远不会滚动，因此它可以将scroll事件传递给下面的元素。您需要将一些子项添加到.decadeHeader才能使其生效。类似的东西：

只需添加脚本＆＃34; _ezswipe.js＆＃34;来自你的html中的https://github.com/TNT-RoX/android-swipe-shim。

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

然后添加课程＆＃34; _ezswipe＆＃34;到

<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/

Answer 3

您可以将CSS中的指针事件：none添加到阻止元素（我认为在IE10及以下版本中不支持），或者尝试将e.preventDefault添加到该元素上的mouseenter / mouseover事件中。

Answer 4

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

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

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

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

简单的解决方案并且有效！

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

4 个答案: