css如何设置超出部分滚动条隐藏


本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。

方法:1、使用“-webkit-scrollbar”属性设置,语法“-webkit-scrollbar{display:none;}”;2、在父元素div里设置“overflow: hidden”样式,并为父元素和子元素设置宽度。

本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

方法一、 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>超出部分隐藏滚动条</title>

</head>

<style type="text/css">

    #box {

        width: 500px;

        height: 300px;

        overflow-x: hidden;

        overflow-y: scroll;

        line-height: 30px;

        text-align: center;

    }

    #box::-webkit-scrollbar {

        display: none;

    }

</style>

<body>

    <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->

    <div id="box">

        你好 </br>你好 </br>

        你好 </br>你好 </br>

        你好 </br>你好 </br>

        你好 </br>你好 </br>

        你好 </br>你好 </br>

        你好 </br>你好 </br>

        你好 </br>你好 </br>

    </div>

</body>

</html>

方法二、利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式

阅读剩余部分

相关阅读 >>

详解css行高line-height属性

怎样在外连接css文件

jquery怎么操作css设置颜色

css如何使用精灵图

css阴影边框怎么设置

css中如何使颜色透明度

css布局方法有哪些

css如何解决不同浏览器下文本兼容的问题

css中怎么把文字加粗

css中width什么意思

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




打赏

取消

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

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

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

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

评论

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

    暂无评论...