当到达固定元素的末尾时,防止非固定元素的滚动

时间:2014-08-22 14:08:46

标签: css scroll

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

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

jsfiddle example

1 个答案:

答案 0 :(得分:0)

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

使用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的样式,并将默认隐藏样式应用于menubody

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

JSFiddle