介绍 & lt; div 类=皁uter-container"比;
,,,& lt; div 类=癷nner-container"比;
,,,……
,,,& lt;/div>
& lt;/div>
.outer-container {
,宽度:360 px;
,身高:200 px;
,位置:相对;
,溢出:隐藏;
}
.inner-container {
,位置:绝对;
,左:0;
,上图:0;
,右:-17 px;
,底部:0;
,overflow-x:隐藏;
,overflow-y:滚动;
} & lt; div 类=皁uter-container"比;
,,,,& lt; div 类=癷nner-container"比;
,,,,,,,& lt; div 类=癱ontent"比;
,,,,,,,,,,……
,,,,,,,& lt;/div>
,,,,& lt;/div>
,& lt;/div>//code 得到;http://caibaojian.com/hide-scrollbar.html
.element, .outer-container {
,,宽度:200 px;
,,身高:200 px;
}
.outer-container {
边境才能:5 px solid 紫色;
位置:,才能相对;
,,溢出:隐藏。
}
.inner-container {
位置:才能,绝对;
,,左:0;
overflow-x才能:隐藏;
,,overflow-y:滚动;
}
.inner-container: -webkit-scrollbar {
,,显示:没有;
} .element:: -webkit-scrollbar {,宽度:0,! important }
IE 10 +
.element {, -ms-overflow-style:没有,,}
火狐
.element {,溢出:-moz-scrollbars-none;,}
小编给大家分享一下CSS如何实现隐藏滚动条并可以滚动内容效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>方法1:计算滚动条宽度并隐藏起来
在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容。这是什么技术呢?其实我只是把滚动条通过定位把它隐藏了起来。
演示
下面给一个简化版的代码,压力
这个代码巧妙的向右移动了17个像素,刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome和IE没发现问题。
<强>方法2:使用三个容器包围起来,不需要计算滚动条的宽度
该代码最早是在微软博客上看到的,跟我上面的思路差不多,只不过人家里面又加多了一个盒子,将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。
代码如下:
<>强方法3:css隐藏滚动条
同时该文章还分享了一种通过css隐藏滚动条的方法,不过这个方法不兼容即做移动端的可以使用。
那就是自定义滚动条的伪对象选择器::-webkit-scrollbar,详情请看之前的文章:CSS3自定义webkit滚动条样式
<强> chrome和Safari
以上是“CSS如何实现隐藏滚动条并可以滚动内容效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
