原理: (原理就是遮盖)
1、如果你把子div的140px宽度移除,你就明白其中的奥妙了。
2、原理就是父元素负责滚动,子元素负责遮盖。
解释:
父类的div 负责滚动,宽度比子类的宽度窄也就是: width: scroll(父) < scroll-son
<html> <style> .scroll{ overflow-x: hidden; overflow-y: auto; height: 300px; width: 120px; background:red } .scroll-son{ overflow-x: hidden; height:100%; width: 140px; } </style> <div class="scroll"> <div class="scroll-son"> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> <p>1</p> </div> </div> </html>
文章来源: HTML - 隐藏滚动条但可以滚动