Chrome 覆盖滚动条不遵循默认行为 - 为什么?

问题描述 投票:0回答:2

如果启动 Chrome,垂直滚动条在 html 表格上将不可见。这是由覆盖滚动条标志控制的。如果启用该标志,则垂直滚动条将不可见,如果禁用该标志,则滚动条将可见。默认情况下,我的理解是它应该等于禁用。

所以令人困惑的是 1) 如果您启动 Chrome,大概它会以默认设置启动,没有任何配置更改。但是,垂直滚动条将不可见。 2) 如果你进入 chrome://flags 并从默认切换 -> 另一个设置 + 重新启动 -> 回到默认 + 重新启动,这次它将显示垂直滚动条。

两种情况都应该默认启动,但为什么行为不同?

google-chrome scrollbar overlay google-chrome-flags
2个回答
3
投票

Chrome 114删除了overflow:overlay滚动模式,并使overlay成为auto的旧别名。使用overflow:overlay与overflow:auto相同,不同之处在于,在存在非覆盖操作系统滚动条的情况下,它不会阻止内容延伸到滚动条装订线中。 (如果存在覆盖滚动条,则没有效果。)

https://developer.chrome.com/blog/chrome-114-beta/#alias-overflow-overlay-to-overflow-auto


1
投票

溢出:覆盖在最新的 chrome 版本 114.0.5735.91 中不起作用,请在另一个浏览器中运行此 html 进行测试

<html>
<head>
    <style>
        html {
            background: #000;
        }
        body {
            background: linear-gradient(#222, #111);
            margin: 0;
        }
        #text {
            height: 150vh;
            width: 100vw;
            display: grid;
            align-items: center;
            justify-items: center;
            color: #ccc;
            font-size: 10vh;
            font-family: monospace;
            user-select: none;
        }
        ::-webkit-scrollbar {
            background-color: transparent;
        }
        ::-webkit-scrollbar-thumb {
            height: 50px;
            border: 4px solid transparent;
            border-radius: 8px;
            background-clip: content-box;
            background-color: #fff4;
        }
        ::-webkit-scrollbar-corner{
            display: none;
        }
    </style>
    <script>
        let overlay;
        this.addEventListener('click', () => {
            let a = (overlay = !overlay) ? 'overlay' : 'auto';
            text.textContent = 'overflow: '+ a;
            document.body.style.overflow = a;
        })
    </script>
</head>
<body>
    <div id="text">overflow: auto</div>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.