您现在的位置是：网站首页> 编程资料编程资料

使用CSS实现无滚动条滚动的两种方法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题

2021-09-04 993人已围观

简介这篇文章主要介绍了使用CSS实现无滚动条滚动的两种方法,需要的朋友可以参考下

我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。

尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。我们都知道overflow:hidden是可以隐藏滚动条的，但存在的问题是：页面或元素失去了滚动的特性，进而溢出内容也变得不可见，这样肯定是不可取的。百度下大部分都是在说overflow:hidden或者overflow-y: no可以解决问题，但是并不能很好的解决我们的问题，那么怎么办呢？

接下来小萌介绍几种简单的方法，但是也不是完美的解决问题了，各求所需吧

第一种：伪对象选择器

在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实现无滚动条滚动功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

上一篇：rem布局原理解析css基于媒体查询和 rem 的响应式布局实践详解html5页面 rem 布局适配方法移动端rem布局的两种实现方法详解H5 活动页之移动端 REM 布局适配方法浅谈移动端的自适应布局问题(响应式、rem/em、Js动态)使用CSS3的rem属性制作响应式页面布局的要点解析

下一篇：利用CSS3动画实现圆圈由小变大向外扩散的效果实例CSS3地图动态实例代码(圆圈向外扩散)HTML5结合CSS3实现的光感圆圈动画特效源码jquery+css3动态圆圈运动背景特效代码jQuery+css3实现漂亮的以圆圈方式显示的彩色时钟效果CSS实现圆形放大镜狙击镜效果只有圆圈里的放大

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢