我有一个奇怪的问题,我不知道如何解决。我左边有一个固定的侧边栏,右边有内容。当您到达固定侧边栏的底部时,右侧的内容开始滚动。我想防止这种情况发生。我已经开始小提示了。有什么建议?
.menu {
position: fixed;
top: 0;
bottom: 10px;
width: 200px;
background: #eee;
margin: 10px;
overflow: scroll;
}
.content {
background: #ddd;
margin-left: 220px;
}
答案 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
的样式,并将默认隐藏样式应用于menu
和body
:
.menu, body {
overflow: hidden;
padding-right: 17px;
}