如何使可滾動的div用鼠標在內容上滾動？

Question

http://codepen.io/anon/pen/KwOyQo

朋友，有什么辦法可以使這個div滾動，甚至可以將鼠標放在盒子上？

HTML：

<div class="container">
        <div class="container-scroll">
            <ul class="list">
                <li class="list-item one"></li>
                <li class="list-item two"></li>
            </ul>
        </div>
    </div>

CSS：

    .container {
        width: 100%;
        height: 400px;
        border: 1px solid black;
        overflow: scroll;
        color: white;
    }
    .container-scroll {
        width: 100%;
        height: 4000px;
    }
    .list {
        list-style: none;
        position: fixed;
    }
    .list-item {
        display: inline-block;
        width: 150px;
        height: 150px;
    }
    .list-item.one {
        background: pink;
    }
.list-item.two{
        background: black;
  float: right;
    }

我試圖用溢出來做點什么，但是什么都起作用。

Answer 1

您已將這些元素設置為position: fixed 。 這將元素相對於瀏覽器定位 ，這意味着它們已完全脫離其父級流程。 因此，當然，當您將鼠標懸停在它們上方時，容器不會滾動。

您可以使用pointer-events: none在這些框中pointer-events: none ，但是並非所有瀏覽器都很好地支持它。 另外，還不清楚將來是否真的需要在這些元素內使用指針事件。

我的建議是刪除可滾動的div。 確保正文/文檔是唯一滾動的元素。 這樣，無論您當前在哪個元素上移動，內容都將滾動。

Answer 2

.list-item {
  display: inline-block;
  width: 150px;
  height: 150px;
  pointer-events:none;
}

這將解決問題

示例 ： http ： //codepen.io/anon/pen/OPKOog