zoukankan      html  css  js  c++  java
  • 如何使用css影藏滚动条

    1.单纯的一句代码:

     div ::-webkit-scrollbar { 0px;}//或者display:none
    

      但是这代码最大的弊端就是只能在webkit内核的浏览器上进行显示,无法做Hack

    2.

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <meta name="renderer" content="webkit">
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            html,
            body {
                height: 100%;
            }
            
            html {
                overflow: hidden;
            }
            
            body {
                overflow: auto;
                 calc(100vw + 20px);
            }
            
            .page {
                height: 200%;
                border: 1px dashed;
                 100vw;
            }
        </style>
    </head>
    
    <body>
        <div class="page">
            <p>我是文字啊啊啊啊啊th</p>
            <p>我是文字啊啊啊啊啊th</p>
            <p>我是文字啊啊啊啊啊th</p>
            <p>我是文字啊啊啊啊啊th</p>
            <p>我是文字啊啊啊啊啊th</p>
            <p>我是文字啊啊啊啊啊th</p>
            <p>我是文字啊啊啊啊啊th</p>
            <p>我是文字啊啊啊啊啊th</p>
            <p>我是文字啊啊啊啊啊th</p>
        </div>
    </body>
    

      说说原理吧,首先是vw,vh这种css3单位不懂请百度,让body宽度是窗口宽度加上20px(浏览器滚动条差不多这个宽度),.page里面的宽度是100%视口也就是100vw,这样body的滚动条就被隐藏了(超出部分被html隐藏)。
    优点:不用js(js必须页面加载完拿高度才准确)。
    缺点:1、IE8不支持,2、移动端不用测试了,移动端滚动条没那么简单,3、overflow:auto;局部滚动在火狐浏览器滚动速度变慢不知道为什么。

  • 相关阅读:
    Linux实验:NTP网络时间服务器
    局域网访问虚拟机内服务器
    Linux实验:ssh免密码配置
    Kali在NET模式下不能联网的解决方法
    centos7安装redis
    外部服务发现-ingress
    自动化运维-Ansible-playbook
    自动化运维-ansible入门篇
    pod健康检查(liveness probe存活探针&&readiness probe 可读性探针)
    python面试总结4(算法与内置数据结构)
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/7772715.html
Copyright © 2011-2022 走看看