隐藏scrollbar - Hide scrollbar

最新推荐文章于 2024-06-02 09:32:14 发布

weixin_34174132

最新推荐文章于 2024-06-02 09:32:14 发布

阅读量440

点赞数

原文链接：http://www.cnblogs.com/juliazhang/p/10524278.html

版权

本文主要讲解如何隐藏scrollbar。

方法一：scrollbar-width （兼容性不好）

　　利用单一css属性 scrollbar-width设置scrollbar的宽度。

scrollbar-width: auto | thin | none | <length>;

auto is the default value and will render the standard scrollbars for the user agent.
thin will tell the user agent to use thinner scrollbars, when applicable.
none will hide the scrollbar completely, without affecting the element's scrollability.
<length> is being debated, but (if added) would be a maximum width of the scrollbar.

　　然而，这个css属性存在兼容性问题，它只在一下浏览器版本下生效，相信以后兼容性会更好：

方法二：双层div，外层overflow: hidden, 内层overflow：auto/scroll/overlay,同时内层的高度/宽度 - 外层的高度/宽度 >= 滚动条的宽度（可以将内层的高度/宽度设置很大）。

这里拿横向滚动为例：

code：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent {
            width: 100px;
            height: 20px;
            border: 1px solid red;
            overflow: hidden;
        }
        .children {
            height: 100px;
            overflow-x: auto;
        }
        .children > div {
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="children">
            <div>First Line, this is first line</div>
        </div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/juliazhang/p/10524278.html

weixin_34174132

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
隐藏scrollbar - Hide scrollbar

本文主要讲解如何隐藏scrollbar。方法一：scrollbar-width （兼容性不好）　　利用单一css属性 scrollbar-width设置scrollbar的宽度。scrollbar-width: auto | thin | none | <length>;autois the default value and will render the...
复制链接

扫一扫