如果启动 Chrome,垂直滚动条在 html 表格上将不可见。这是由覆盖滚动条标志控制的。如果启用该标志,则垂直滚动条将不可见,如果禁用该标志,则滚动条将可见。默认情况下,我的理解是它应该等于禁用。
所以令人困惑的是 1) 如果您启动 Chrome,大概它会以默认设置启动,没有任何配置更改。但是,垂直滚动条将不可见。 2) 如果你进入 chrome://flags 并从默认切换 -> 另一个设置 + 重新启动 -> 回到默认 + 重新启动,这次它将显示垂直滚动条。
两种情况都应该默认启动,但为什么行为不同?
Chrome 114删除了overflow:overlay滚动模式,并使overlay成为auto的旧别名。使用overflow:overlay与overflow:auto相同,不同之处在于,在存在非覆盖操作系统滚动条的情况下,它不会阻止内容延伸到滚动条装订线中。 (如果存在覆盖滚动条,则没有效果。)
https://developer.chrome.com/blog/chrome-114-beta/#alias-overflow-overlay-to-overflow-auto
溢出:覆盖在最新的 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>