web前端开发技术博客
当前位置: HTML/CSS > css隐藏滚动条方法

css隐藏滚动条方法

2018-06-18 分类:HTML/CSS 作者:码云 阅读(1108)

我们在前端开发过程中经常会遇到这种情况,在一小块的内容上会加上滚动条,但是为了美观我们会隐藏滚动条还需要支持滚动,最容易的办法就是使用iscroll插件来实现,但这不是我们想要的,细想一下,现在css其实就可以实现这个功能,经过我深思熟虑后,想到了3中比较好的方法,亲测可以使用,并完美兼容。

一、通过计算滚动条的宽度来隐藏

HTML代码

1
2
3
4
5
6
7
8
9
<div class="outer-container">

<div class="inner-container">

......

</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
.outer-container{

width: 360px;

height: 200px;

position: relative;

overflow: hidden;

}

.inner-container{

position: absolute;

left: 0;

top: 0;

right: -17px;

bottom: 0;

overflow-x: hidden;

overflow-y: scroll;

}

这个代码巧妙的向右移动了17个像素,刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome

和IE没发现问题。

二、CSS隐藏滚动条

这个方法完美支持Chrome、Safari、IE10+、Firefox,但是不兼容IE低版本的,不过做移动端的可以使用。

原理就是那就自定义滚动条的伪对象选择器::-webkit-scrollbar

chrome 和Safari

1
.element::-webkit-scrollbar { width: 0 !important }

IE 10+

1
.element { -ms-overflow-style: none; }

Firefox

1
.element { overflow: -moz-scrollbars-none; }

HTML代码

1
<div class="element"></div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.element{

width: 200px;

height: 200px;

overflow: scroll;

}

.element::-webkit-scrollbar { width: 0 !important }

.element { -ms-overflow-style: none; }

.element { overflow: -moz-scrollbars-none; }

三、使用三个容器包围起来,不计算滚动条宽度

该代码是我最早一篇博客上看到的,感觉不错就记录下来的,跟我上面的提到的思路差不多,只不过人家里面又加多了一个盒子,将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。

HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="outer-container">

<div class="inner-container">

<div class="content">

......

</div>

</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
31
32
33
34
35
.element, .outer-container {

width: 200px;

height: 200px;

}

.outer-container {

border: 5px solid purple;

position: relative;

overflow: hidden;

}

.inner-container {

position: absolute;

left: 0;

overflow-x: hidden;

overflow-y: scroll;

}

.inner-container::-webkit-scrollbar {

display: none;

}

结束语

以上就是码云笔记今天为大家带来的css实现的隐藏滚动条并可以滚动内容的全部代码,在项目中经常用到,希望对大家有用。

「如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
1

觉得文章有用就打赏一下文章作者

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - css隐藏滚动条方法

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流