比较实用的一个小例子,有时候页面上带有滚动条会影响美观,出现两个滚动条的时候更是尴尬,这样的情况下就需要我们去掉一个滚动条,但是去了滚动条后页面又显示不全了,怎么办?还得保留滚动效果-----原来我,什么都想要(哈哈)。实现方法其实也很简单,看了网上的大神的解决思维,总结如下,制造两层,一个父层,一个子层,如果是div去滚动条就在内容div外面再加一层div,如果是要去年整个页面的滚动条,那就给html(父)和body(子)设置样式就可以了。具体CSS代码如下:
html{ height: 100%; 100%; overflow: hidden; } body{ 100%; height: 100%; overflow-y: scroll; padding-right: 17px; }
以上样式是实现去掉整个页面的滚动条,如果去掉div的滚动条,其实思路是一样的,主要是为了自己记住,还是再上个代码,具体问题具体解决嘛。
CSS代码:
.parentDiv{ height: 400px; width: 200px; overflow: hidden; border: 1px solid #ccc; margin: 20px auto; } .childDiv{ height: 100%; width: 220px; overflow-y: auto; overflow-x: hidden; }
HTML代码:
<div class="parentDiv"> <ul class="childDiv"> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div>
这样就可以了,另外,需要注意的一点是千万要设置两层元素的宽高、否则还是会不起作用。其实,计算机还是很有意思的。
https://segmentfault.com/q/1010000006863477