1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

css自定义滚动条不滚动时隐藏的方法

浏览器现在一般都已支持自定义滚动条,成了设计师和完美主义者的救星。

把导航栏右侧的滚动条,在不滚动时隐藏掉(同时还发了个小视频表示效果)。就是下图中右侧的粗线:

在mac系统下测试了Chrome/Safari/Firefox浏览器,发现这些系统在默认情况下,不滚动时滚动条是隐藏的。如下图

原来是自定义滚动条屏蔽了系统的这一特性。

解决方案:

将外包裹层默认设置为overflow-y: hidden; 同时设置hover效果时overflow: auto;

如下: 

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>    <style>    .content{      width: 200px;      height: 150px;      padding-left: 10px;      border: 1px solid #ccc;      overflow-y: hidden;    }    .content:hover{      overflow-y: auto;    }    .scrollbar::-webkit-scrollbar {      width: 2px;    }      .scrollbar::-webkit-scrollbar-track-piece {      background-color: #C00000;    } /* 滚动条的内层滑轨背景颜色 */      .scrollbar::-webkit-scrollbar-track {      background-color: #085820;    } /* 滚动条的外层滑轨背景颜色 */      .scrollbar::-webkit-scrollbar-thumb {      background-color: #d4d8e2;    } /* 滚动条的内层滑块颜色 */      .scrollbar::-webkit-scrollbar-button {      background-color: #085820;      display: none;    } /* 滑轨两头的监听按钮颜色 */    </style>  </head>  <body>    <div class="content scrollbar">      <p>标题01...</p>      <p>标题02...</p>      <p>标题03...</p>      <p>标题04...</p>      <p>标题05...</p>      <p>标题06...</p>      <p>标题07...</p>    </div>  </body>  </html>

原文链接:https://www.qiquanji.com/post/7107.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: