隐藏滚动条同时又可以滚动(解决不同浏览器之间的兼容性问题）

在我们进行网站开发时，可能会有为了保持网站的美观和整洁性而想要隐藏滚动条的想法。在最近的网站开发过程中，我就曾碰到过这个问题。针对这个问题也进行了相应的研究学习，整理了如下的几个思路：

一、使用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可以直接运行，采用的就是第二种方法。红绿蓝三种颜色已经超出滚动区域范围，可滚动显示，但是滚动条已经被我隐藏了，因此看不到。

应用第二种方法，我们就能够完美解决隐藏滚动条和浏览器之间兼容性的问题了。

优质内容筛选与推荐>>
1、Android Sqite数据库 <5>
2、Weka学习 -- StringToWordVector 源代码学习（1）
3、第八章 jQuery与Ajax应用
4、取消IDEA中光标“指哪打哪”模式
5、jQuery.extend 函数详解(转载)

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看