2023.05.31 | admin | 131次围观
小编给大家分享一下如何使用CSS实现无滚动条滚动,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获网页没有上下滚动条,下面让我们一起去了解一下吧!
第一种:伪对象选择器
在webkit内核的浏览器里可以定义滚动条样式。在CSS初始处定义
::-webkit-scrollbar{ display:none;(或者是width: 0;) }
不过目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。
第二种:变相隐藏
大体思路是在div外面再套一个div。这个div设置overflow:hidden。而内容div设置 overflow-x: hidden;overflow-y: scroll;然后再设置外层div的width小于内容div的width,就是用一个无滚动条的div包裹另一个有滚动条的div,从而实现隐藏滚动条的效果。
例子:
使用CSS实现无滚动条滚动
- 测试数据1
- 测试数据2
- 测试数据3
- 测试数据4
- 测试数据5
- 测试数据6
- 测试数据7
- 测试数据8
- 测试数据9
- 测试数据10
- 测试数据11
- 测试数据12
- 测试数据13
- 测试数据14
- 测试数据15
- 测试数据16
- 测试数据17
- 测试数据18
- 测试数据19
- 测试数据20
- 测试数据21
- 测试数据22
- 测试数据23
- 测试数据24
- 测试数据25
- 测试数据26
- 测试数据27
- 测试数据28
- 测试数据29
- 测试数据30
以上是“如何使用CSS实现无滚动条滚动”这篇文章的所有内容网页没有上下滚动条,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
版权声明
本文仅代表作者观点。
本文系作者授权发表,未经许可,不得转载。
发表评论