Question

朋友们，有没有办法让这个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，但并非所有浏览器都支持此功能。此外，还不清楚您将来是否真的需要在这些元素中使用指针事件。

我的建议是删除可滚动的div。确保正文/文档是滚动的唯一元素。这样，无论您当前将鼠标悬停在哪个元素上，内容都会滚动。

Answer 2

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

这样就可以了解

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

如何使用鼠标悬停在内容上滚动div？

2 个答案: