当侧栏滚动结束时，防止内容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解决方案持开放态度，则可以将事件侦听器绑定到侧边栏，以便在到达底部时停用滚动事件。结果可以在this JSFiddle中进行测试。

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

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