CSS隐藏网页滚动条 - 起点终站

我们应该感谢相遇,无论结局是喜是悲....
CSS隐藏网页滚动条
  • 首页 > IT技术
  • 作者:起点终站
  • 2017年7月26日 17:09 星期三
  • 浏览:16457
  • 字号:
  • 评论:0
  • 前几天发现一个bug,记录下。。。

    在网页上定住页面时,即 

    overflow-y: hidden;
    会导致网页移动了下,经查是滚动条突然消失后网页扩展的原因


    为避免此bug。。把网页的滚动条隐藏了、。、、效果可看本站

    一段CSS搞定,代码如下


    /* 滚动条*/
    ::-webkit-scrollbar {
    	width: 0px;
    	height: 10px
    }
    
    ::-webkit-scrollbar-button {
    	display: none
    }
    
    ::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece {
    	background: -webkit-gradient(linear,left);
    	width: 10px;
    	height: 10px
    }
    
    ::-webkit-scrollbar-thumb {
    	border-width: 0 3px;
    	border-style: solid;
    	border-color: #fefefe;
    	border-radius: 6px;
    	background: #d9d9d9
    }
    
    ::-webkit-scrollbar-thumb:horizontal {
    	border-width: 3px 0;
    	border-style: solid;
    	border-color: #fefefe;
    	border-radius: 5px;
    	background: #d9d9d9
    }
    
    ::-webkit-scrollbar-thumb:hover {
    	background: #bdbdbd
    }
    
    ::-webkit-scrollbar-thumb:active {
    	background: #8e8e8e
    }
    /* 滚动条结束 */


    代码由鬼少提供,biu biu biu 感谢下他



      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: CSS隐藏网页滚动条
    本文地址:https://blog.hellozwh.com/?post=316
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    • blogger
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2016-2019 起点终站 闽ICP备16011094号-1