Chrome Overlay Scrollbars不遵循默认行为-为什么?

f0brbegy  于 2023-06-03  发布在  Go
关注(0)|答案(1)|浏览(289)

如果你启动Chrome浏览器,垂直滚动条在html表格上将不可见。这由Overlay Scrollbars标志控制。如果启用该标志,则垂直滚动条不可见,如果禁用该标志,则滚动条可见。默认情况下,我的理解是它应该等于禁用。
所以困惑是1)如果你启动Chrome,大概它会以默认设置启动,而不会更改配置。但是,垂直滚动条将不可见。2)如果你进入chrome://flags并从default -> another setting + relaunch -> back切换到default + relaunch,这一次它会显示垂直滚动条。
这两种情况都应该在默认情况下启动,但为什么行为不同?

xbp102n0

xbp102n01#

Overflow:overlay not working in latest chrome version 114.0.5735.91,run this html in another browser to test

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

相关问题