在绝对定位元素下滚动 DIV

Question

我有一个简单的网站，其中包含可滚动的

元素。它运作良好，但我还需要一个绝对定位的

元素覆盖在上面-同时我仍然需要它像没有这个元素一样滚动。

你可以在这里看到一个简单的JSFiddle: http://jsfiddle.net/41rawrks/ 你可以用鼠标滚轮（或触控板）滚动

元素，但如果光标移到其他元素上（如下图），就无法再滚动了。我能改变这个吗？ 我想这是因为DOM不再认为光标已经停留在可滚动的元素上，一旦它碰到了可拖动的元素（尽管可拖动的元素是绝对定位在可滚动的元素内部）。

我该怎么办？

我曾经认为这是不可能的，但这个网站做到了！ http://weareeli.dk

- Chuck Le Butt

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

- benjasHu

---

不错，但似乎会影响计算？ :-/ http://jsfiddle.net/f57bbv3g/2/ - Chuck Le Butt

Answer 2

.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 http://jsfiddle.net/41rawrks/7/

- tnt-rox

---

@Chuck 需要对你的实例进行微调，可能需要将高度调整为600％，这是为了解决Android设备上的滑动问题而设计的。在Firefox Nightly上运行良好。 - tnt-rox

我也会考虑在滚动期间像@iamdash建议的那样禁用“pointer-events”，并在停止滚动时重新启用，以获得更流畅的用户体验。 - tnt-rox

@Chuck，你用的是什么浏览器？在火狐浏览器中可以正常工作。 - tnt-rox

我正在使用Chrome。如你建议的，我在FF中进行了测试，它确实可以工作...尽管当光标位于拖动栏上方时，它会反转滚动方向 :) - Chuck Le Butt

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/62522/discussion-between-tnt-rox-and-chuck。 - tnt-rox

Answer 3

这个解决方案融合了之前提到的所有方法。pointer-events: none 可以防止滚动卡住，但也会阻止拖拽选项的使用。解决方法是只在列不滚动时将 pointer-events: none 添加到可拖动元素中。

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

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

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

- Chuck Le Butt

Answer 4

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

- iamdash