html - 侧边栏滚动结束时防止内容 div 滚动

Question

所以我有这个侧边栏，当我向下滚动到末尾并继续滚动时，它会向下滚动内容 div。如何让侧边栏 div 滚动只影响他的 div 而忽略内容 div？

这是它的样子:

* {padding:0;margin:0}
html {min-height:1000%}

#sidebar {
  overflow: auto;
  position: fixed;
  width: 200px;
  height: 200px;
}

<div id="sidebar">
  <p>Lorem Ipsum turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed</p>
</div>

Answer 1

如果您对 javascript 解决方案持开放态度，则可以将事件监听器绑定(bind)到边栏，当您到达其底部时停用滚动事件。结果可以在this JSFiddle中测试.

var sidebar = document.getElementById('sidebar');
sidebar.addEventListener('wheel', function(e) {
    if(e.deltaY > 0 && this.scrollTop >= this.clientHeight) {
        e.preventDefault();
    }
});

注意:如果您要将此代码段用于实时站点，则可能需要对其进行一些测试和调整。我还没有真正测试过浏览器的兼容性，您可能想要添加对触摸设备的支持。