隐藏滚动条同时又可以滚动(解决不同浏览器之间的兼容性问题）
在我们进行网站开发时，可能会有为了保持网站的美观和整洁性而想要隐藏滚动条的想法。在最近的网站开发过程中，我就曾碰到过这个问题。针对这个问题也进行了相应的研究学习，整理了如下的几个思路：
一、使用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可以直接运行，采用的就是第二种方法。红绿蓝三种颜色已经超出滚动区域范围，可滚动显示，但是滚动条已经被我隐藏了，因此看不到。
应用第二种方法，我们就能够完美解决隐藏滚动条和浏览器之间兼容性的问题了。
