隐藏scrollbar

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

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

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

scrollbar- 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>

每天一点点

相关阅读:
Delphi XE2 之 FireMonkey 入门(13)
Delphi XE2 之 FireMonkey 入门(12)
Delphi XE2 之 FireMonkey 入门(11)
svn泄漏敏感信息利用方式
提取windows用户明文密码
firefox中outlook.com页面卡顿的原因
漏洞的定义
Hydra--密码破解的神器
数据库设计那些事(数据库范式)
数据库范式

原文地址：https://www.cnblogs.com/juliazhang/p/10524278.html