原理: (原理就是遮盖)
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>