使用CSS实现无滚动条滚动
2018-02-26 11:02
309 查看
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。
尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。我们都知道
overflow:hidden是可以隐藏滚动条的,但存在的问题是:页面或元素失去了滚动的特性,进而溢出内容也变得不可见,这样肯定是不可取的。百度下大部分都是在说
overflow:hidden或者
overflow-y:no可以解决问题,但是并不能很好的解决我们的问题,那么怎么办呢?
接下来介绍几种简单的方法,但是也不是完美的解决问题了,各求所需吧
### 第一种:伪对象选择器
在webkit内核的浏览器里可以定义滚动条样式。在CSS初始处定义
```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,从而实现隐藏滚动条的效果。
例子:
```html
使用CSS实现无滚动条滚动
body,html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.box_wrap {
margin: 20px auto;
width: 200px;
height: 400px;
border: 1px solid #ccc;
overflow: hidden;
}
.box_wrap ul {
width: 220px;/ 多出20像素是滚动条的位置,会被父容器盖住就看不到了 /
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.box_wrap ul li {
width: 200px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
font-size: 12px;
text-align: center;
}
测试数据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
```
之前的一个项目中用了iframe,有一个滚动条实在是丑,找了各种方法想去掉,最后用第二种方法把滚动条去掉了。 简单总结下来。
这些并不一定能完美解决你的问题,或者你也可以使用插件来美化滚动条,这样无疑也是一个好办法。
相关文章推荐
- CSS 实现隐藏滚动条同时又可以滚动
- CSS 实现隐藏滚动条同时又可以滚动
- css实现div悬浮层,始终停留在浏览器的最下方,不随页面的滚动条滚动改变位置或消失
- CSS 实现隐藏滚动条同时又可以滚动
- css设置背景图片不随滚动条滚动;background-attachment使用
- 前端切图:CSS实现隐藏滚动条同时又可以滚动
- CSS 实现隐藏滚动条同时又可以滚动(转)
- 子元素scroll父元素容器不跟随滚动(JS实现),子元素内滚动条没有(css实现)
- 悬停效果 静止不动 不随滚动条滚动 纯css实现
- 【CSS】css实现移动端或手机网页上溢出滚动但隐藏滚动条的原理和方法
- css实现弹出层显示阻止滚动条滚动
- 悬停效果 静止不动 不随滚动条滚动 纯css实现
- CSS 实现隐藏滚动条同时又可以滚动
- CSS 实现隐藏滚动条同时又可以滚动
- css如何实现滚动条隐藏但鼠标仍然可以滚动
- 纯CSS实现隐藏滚动条但仍具有滚动的效果
- CSS 实现隐藏滚动条同时又可以滚动
- CSS实现隐藏滚动条同时又可以滚动
- 使用jq实现fixed定位随滚动条,左右滚动
- 使用css实现页面头部固定,下面随着内容的增多滚动,但是头部不动的效果