以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现。
此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现。
HTML:
<div class="sidebar"> <div class="sidebar-bd"> 内容 </div> </div>
CSS:
.sidebar{ width: 50px; position: fixed; top: 0px; bottom: 0px; background-color: #666a82; z-index: 102; overflow-x: hidden; } .sidebar .sidebar-bd{ width: 70px; height: 100%; overflow: auto; overflow-x: hidden; }
以上代码的效果是左侧固定的竖条,当内容超过一屏的时候,可滚动。
原理是外层限制宽度,设置超过部分隐藏;内层宽度增加20px,滚动条显示在增加的20px里,因为外层限制了显示宽度,所以有滚动条的时候就不会显示出来。
这个方法兼容IE8及以上。
时间: 2024-10-10 17:11:56