css3怎么将滚动条隐藏


本文摘自PHP中文网,作者V,侵删。

css3将滚动条隐藏的方法是,自定义滚动条的伪对象选择器【::-webkit-scrollbar】,例如【.element::-webkit-scrollbar { width: 0 !important }】。

本文操作环境:windows10系统、css 3、thinkpad t480电脑。

在很多时候我们会在工作中遇到这种情况,需要隐藏滚动条并且还要支持滚动。那么遇到这种情况我们该怎么办呢?可能很多人第一反应就是使用iscroll插件,但是我更加倾向于使用css来实现这个功能。下面就让我们一起来看看具体方法吧。

方法1:计算滚动条宽度并隐藏起来

只需要把滚动条通过定位把它隐藏起来即可。

1

2

3

4

5

<div class="outer-container">

    <div class="inner-container">

        ......

    </div>

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.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没发现问题。

方法2:使用三个容器包围起来,不需要计算滚动条的宽度

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

阅读剩余部分

相关阅读 >>

css实现基于用户滚动应用(代码)

关于老式浏览器兼容html5和CSS3的问题详解

html5与CSS3的新交互特性

css怎么加滚动条

利用CSS3进行弹性布局时内容对齐的方法详解

CSS3中怎么调节透明度

CSS3 cubic-bezier()实现链接悬停动画效果的方法介绍

html5实践-使用CSS3如何完成google涂鸦动画的详解

CSS3怎么实现圆角

CSS3中column-span有什么用

更多相关阅读请进入《CSS3》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...