英文:
Chrome Overlay Scrollbars not following default behavior - Why?
问题
如果您启动 Chrome，html 表格上的垂直滚动条将不可见。这由 Overlay Scrollbars 标志控制。如果启用了该标志，则垂直滚动条将不可见；如果禁用了该标志，则滚动条将可见。默认情况下，我理解应该等于禁用。
所以混淆的地方是：
1）如果您启动 Chrome，可能会以默认设置启动，没有更改任何配置。然而，垂直滚动条将不可见。
2）如果您进入 chrome://flags 并从默认设置切换到另一个设置 + 重新启动 + 切换回默认设置 + 重新启动，这次将显示垂直滚动条。
这两种情况都应该以默认设置启动，但为什么行为不同呢？
英文:
If you launch Chrome, the vertical scrollbar will not be visible on html tables. This is controlled by the Overlay Scrollbars flag. If the flag is enabled, the vertical scrollbar will not be visible, if flag is disabled, the scrollbar will be visible. By default, my understanding is that it should equal disabled.
So confusion is 1) If you launch Chrome, presumably it launches with default settings with nothing config changed. However, vertical scrollbar will not be visible. 2) If you go into chrome://flags and switch from default -> another setting + relaunch -> back to default + relaunch, this time it will show the vertical scrollbar.
Both cases should be launching in default but why is the behavior different?
答案1
得分: 2
Chrome 114 移除了 overflow: overlay 滚动模式，并将 overlay 视为 auto 的旧别名。使用 overflow: overlay 与 overflow: auto 相同，唯一的区别是在存在非 overlay 操作系统滚动条的情况下，它不会阻止内容扩展到滚动条槽中。（如果存在 overlay 滚动条，则没有影响。）
链接：https://developer.chrome.com/blog/chrome-114-beta/#alias-overflow-overlay-to-overflow-auto
英文:
Chrome 114 removes the overflow: overlay scrolling mode, and makes overlay a legacy alias of auto. Using overflow: overlay is the same as overflow: auto, except that it does not prevent content from extending into the scrollbar gutter, in cases where non-overlay OS scrollbars are present. (If overlay scrollbars are present, there is no effect.)
https://developer.chrome.com/blog/chrome-114-beta/#alias-overflow-overlay-to-overflow-auto
答案2
得分: 0
Overflow: overlay在最新的Chrome版本114.0.5735.91中不起作用，请在另一个浏览器中运行此HTML以进行测试。
英文:
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>
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论