css - 到达固定元素的末尾时防止滚动非固定元素

Question

我有一个奇怪的问题，我不确定如何解决。我在左侧有一个固定的侧边栏，在右侧有一个内容。当您到达固定侧边栏的底部时，右侧的内容开始滚动。我想防止这种情况发生。我已经开始展示 fiddle 了。有什么建议么？

.menu {
position: fixed;
top: 0;
bottom: 10px;
width: 200px;
background: #eee;
margin: 10px;
overflow: scroll;
}
.content {
background: #ddd;
margin-left: 220px;
}

jsfiddle example

Answer 1

如果您不介意滚动条只在悬停时显示，您可以在悬停时禁用/启用它们。当元素的滚动条被隐藏时，该元素将不会滚动。

Javascript:

var menu = document.querySelector('.menu');
var content = document.querySelector('.content');
var body = document.querySelector('body');
menu.addEventListener('mouseenter', function (event) {
    menu.style['overflow'] = 'auto';
    menu.style['padding-right'] = '0px';
});
menu.addEventListener('mouseleave', function (event) {
    menu.style['overflow'] = 'hidden';
    menu.style['padding-right'] = '17px';
});

content.addEventListener('mouseenter', function (event) {
    body.style['overflow'] = 'auto';
    body.style['padding-right'] = '0px';
});
content.addEventListener('mouseleave', function (event) {
    body.style['overflow'] = 'hidden';
    body.style['padding-right'] = '17px';
});

同时将box-sizing: borderbox添加到menu的样式中，并将默认的隐藏样式应用于menu和body :

.menu, body {
    overflow: hidden;
    padding-right: 17px;
}

JSFiddle