zoukankan      html  css  js  c++  java
  • HTML

    代码:(原理就是遮盖)

    1、如果你把子div的140px宽度移除,你就明白其中的奥妙了。

    2、原理就是父元素负责滚动,子元素负责遮盖。

    <html>
    <style>
        .scroll{
            overflow-x: hidden; overflow-y: auto;
        }    
        .scroll-son{
            overflow-x: hidden;
        }
    </style>
    
    <div style="height: 300px;   120px; background:red" class="scroll"> 
        <div style="height:100%;  140px;" 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><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><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>
  • 相关阅读:
    gitLab、docker
    Spring源码分析
    Tomcat堆内存分析
    Kafka入门一
    Java NIO
    spring注解
    websocket即时通讯
    pycharm安装dlib库
    python+opencv人脸识别是否戴口罩
    2021年暑假周总结1
  • 原文地址:https://www.cnblogs.com/CyLee/p/5666265.html
Copyright © 2011-2022 走看看