zoukankan      html  css  js  c++  java
  • 小米项目中的问题

    滚动条隐藏:在小米官网中使用的jquery方法不太理解,所以在这里用另一种方法来实现一下滚动条的隐藏效果。

    1.  把body的横向,纵向的超出部分隐藏,宽设置100%;高设置100%。就没有body的滚动条了,

    2.  然后把最外层的div的宽设置的比body的宽宽一点,把div的滚动条挤出去,并把div的横向超出部分隐藏掉,就可以实现没有滚动条也可以滚动的效果。

    <html>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            overflow-x: hidden;overflow-y: hidden;
        }    
        .scroll-son{
            overflow-x: hidden;
        }
    </style>
    <body style="height:100%;   100%;" class="scroll">
    
        <div style="height:101%; 102%;; background: #ccc; margin: 0 auto;" class="scroll-son"> 
         <div style="background: white;" > 
            <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> 
            <p>2</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>2</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>
    
    </body>
    </html>
    
  • 相关阅读:
    POJ 1041(欧拉路)
    POJ 1904(强连通分量)Tarjan
    POJ 1486(二分图匹配)二分图的完全匹配的必须边
    POJ 1780(欧拉路)
    POJ 1386(欧拉路)
    HDU 3496(DP)
    PKU2387Til the Cows Come Home(SPFA+邻接表)
    HDU1863畅通工程(prim)
    ACM国内外OJ网站大集合
    HDU1175连连看(BFS)
  • 原文地址:https://www.cnblogs.com/LQK157/p/10952548.html
Copyright © 2011-2022 走看看