在我们进行网站开发时，可能会有为了保持网站的美观和整洁性而想要隐藏滚动条的想法。在最近的网站开发过程中，我就曾碰到过这个问题。针对这个问题也进行了相应的研究学习，整理了如下的几个思路：
一、使用CSS样式来解决（Chrome浏览器）
#content::-webkit-scrollbar { /*此处设置滚动条的宽度和高度，宽度为纵向滚动条设置，高度为横向滚动条设置，设置为0的滚动条消失*/
width: 4px;
height: 4px;
}
#content::-webkit-scrollbar-thumb {/*滚动条滑块样式*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
#content::-webkit-scrollbar-track {/*滚动条轨道样式*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
在Chrome浏览器中，只要把你的滚动区域加上上述代码，就可以对滚动条的样式进行设置了。然而这种方法只对Chrome浏览器有效，对于IE浏览器，使用上述代码是没有任何效果的。当然IE浏览器也可以对滚动条样式进行设置，但是只能对滚动条的颜色这一项进行设置。代码如下：
#content{
/*三角箭头的颜色*/
scrollbar-arrow-color: #fff;
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: #0099dd;
/*滚动条整体颜色*/
scrollbar-highlight-color: #0099dd;
/*滚动条阴影*/
scrollbar-shadow-color: #0099dd;
/*滚动条轨道颜色*/
scrollbar-track-color: #0066ff;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color:#0099dd;
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: #0099dd;
/*滚动条基准颜色*/
scrollbar-base-color: #0099dd;
}
而为了应对不同浏览器之间的兼容性，我们要采用第二种方法，接下来请看第二种方法。
二、在滚动区域外在嵌套一层空白div，该层div有宽高，宽度应当小于滚动区域一个滚动条的宽度，设置外层overflow为hidden 溢出部分不显示，这样一来滚动条的部分已经在外层空间溢出，根据设定，将不再页面显示了。如下:
这里Chrome和IE浏览器滚动条默认宽度都是17px，所以外层比滚动层宽度少17px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.scroll-shell {
width: 100px;
height: 600px;
overflow: hidden;
}
.scroll {
width: 117px;
height: 600px;
overflow: auto;
}
.red{
width: 100%;
height: 50%;
background-color: red;
}
.green{
width: 100%;
height: 50%;
background-color: green;
}
.blue{
width: 100%;
height: 50%;
background-color: blue;
}
</style>
</head>
<body>
<div class="scroll-shell">
<div class="scroll">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
</div>
</body>
</html>
上述html可以直接运行，采用的就是第二种方法。红绿蓝三种颜色已经超出滚动区域范围，可滚动显示，但是滚动条已经被我隐藏了，因此看不到。
应用第二种方法，我们就能够完美解决隐藏滚动条和浏览器之间兼容性的问题了。
原文地址：https://www.cnblogs.com/The-master-of-time/p/10244542.html
时间： 2024-10-10 13:25:56