隐藏滚动条小技巧（兼容至IE7）

关于滚动条的设置

1. 滚动条设置

    overflow:scroll;

2. 也可以单独对x和y设置滚动条

    //隐藏x轴，显示Y轴滚动条

    overflow-x:none;

    overflow-y:scroll;

滚动条隐藏，且仍然有滚动功能

1. 对于webkit内核可直接设置隐藏滚动条样式

    element{

        overflow-x:none;

        overflow-y:scroll;

    }

    element::-webkit-scrollbar {

        display: none;

    }

2. 对于IE浏览器，可以使用如下方法：
   给需要滚动的内容content外加上两个容器

    


         


            


                ......

            

         

     

结构如图

image

其中outer-container宽高和content一致（主要是宽度）

.outer-container,.content {

    width: 200px; height: 200px;

}

对外部容器outer-container使用相对定位

对内部容器inner-container使用绝对定位，确保两个容器左侧对齐

.outer-container {

   position: relative;

   overflow: hidden;

}

.inner-container {

   position: absolute; 

   left: 0;

}

对inner-container设置滚动条，且宽度大于外部滚动条

.inner-container {

    width:110%;

    overflow-x: hidden;

    overflow-y: scroll;

}

此时因为外部容器将内部容器遮盖，页面中已经不显示滚动条，且仍然可以滚动。