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>
    
  • 相关阅读:
    ASP.NET 文件下载
    Asp.net 加密解密类
    ASP.Net 获取服务器信息
    Visual Studio 2013 和 ASP.NET 预览
    Windows Server 2012安装时所需要的KEY
    WordPress主题模板层次和常用模板函数
    小meta的大作用
    《淘宝技术这十年》之LAMP架构的网站
    面试题(八)
    面试题(七)
  • 原文地址:https://www.cnblogs.com/LQK157/p/10952548.html
Copyright © 2011-2022 走看看