如何在滚动上只滚动鼠标指针内容？

Question

​

​

考虑一下，我的鼠标定位在边栏上，我使用鼠标轮滚动到边栏的底部或顶部。当我到达边栏的底部并继续滚动方向盘时，它将开始滚动主内容。我希望鼠标滚轮只滚动光标所处的当前div。

这是可能的CSS吗？或者我需要连接JS/jQuery事件来检测我当前所在的div并停止滚动事件？我希望有一个CSS解决方案。

提前谢谢

Answer 1

它应该只与常规CSS一起工作。尝试将这两个部分作为分离容器处理。下面是我根据您的插图构建的一个简化示例：

​

.sidebar {
  height: 100vh;
  width: 30%;
  float: left;
  overflow-y: scroll;
  background-color: rgb(83, 83, 83);
}

.main-content {
  height: 100vh;
  width: 70%;
  float: left;
  overflow-y: scroll;
  background-color: rgb(139, 139, 139);
}

.content {
  height: 500vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
}

 <div class="sidebar">
  <div class="content">Sidebar</div>
</div>
<div class="main-content">
  <div class="content">Main Content</div>
</div>

​