前端（浏览器兼容性Ie与chrome）之滚动条的隐藏

Posted 2021-02-02 the-master-of-time

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端（浏览器兼容性Ie与chrome）之滚动条的隐藏相关的知识，希望对你有一定的参考价值。

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

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

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

以上是关于前端（浏览器兼容性Ie与chrome）之滚动条的隐藏的主要内容，如果未能解决你的问题，请参考以下文章

jQuery之_元素滚动

浏览器史话中chrome霸主地位的奠定与国产浏览器的割据混战

自定义浏览器滚动条的样式，打造属于你的滚动条风格

jquery.nicescroll.min.js滚动条使用方法

ie浏览器的网页滚动条不能动，如何解决，就是网页右侧的滚动条，chrome浏览器的页面可以正常滚动。

前端-解决IE浏览器下iframe中出现多余的滚动条问题