HTML - 隐藏滚动条但可以滚动

原理: (原理就是遮盖)

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>

猜你喜欢

转载自blog.csdn.net/qq_26282869/article/details/85095584