css超出显示滚动条的方法有哪些


本文摘自PHP中文网,作者coldplay.xixi,侵删。

css超出显示滚动条的方法:1、计算滚动条宽度并隐藏起来;2、使用三个容器包围起来,不需要计算滚动条的宽度;3、自定义滚动条的伪对象选择器【::webkit-scrollbar】。

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css超出显示滚动条的方法:

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<div class="outer-container">

    <div class="inner-container">

        ......

    </div>

</div>

.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:使用三个容器包围起来,不需要计算滚动条的宽度

阅读剩余部分

相关阅读 >>

css怎么写一个直角三角形

div在屏幕中如何实现水平居中和垂直居中

前端工程师需要掌握哪些知识?

css规则是什么

css表格边框怎么设置

css tab-size属性怎么用

css居中代码是什么

css样式冲突怎么办

css操作控件实现disable效果

react中如何引入css样式

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




打赏

取消

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

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

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

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

评论

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

    正在狠努力加载,请稍候...