html - 展开滚动条下方的 html 文档

Question

每当我有扩展页面高度的内容时，我呈现的网站上就会出现一个滚动条。但是，滚动条将我的内容向左推滚动条的宽度，因此当我导航到高度小于页面高度的页面时，随着页面宽度调整大小时会出现明显的跳跃。是否可以让滚动条位于我所有 html 内容的顶部？类似于在 iOS 上的 Chrome 中滚动的方式。

理想情况下，像 overflow:absolute 这样出现滚动条且内容未被剪切的 css 属性是最好的，但我知道它不存在。

编辑:在下图中，您可以看到滚动条具有白色背景并将我的 html 内容推到左侧。我想要的是滚动条下方的 html 内容，就好像滚动条在右侧有绝对定位一样。

我与一位运行与我相同版本的 chrome 的同事商量，他的滚动条完全符合我的要求。也许谷歌的 AB 测试？

Answer 1

没有可靠的跨浏览器方式来完成您正在寻找的事情。

不同的浏览器以不同的方式处理滚动条——有些(包括 Safari 和某些版本的 Chrome)已经完全按照您的要求进行操作，大多数其他浏览器为滚动条强制使用特定的背景颜色和宽度(不总是相同的宽度)并推送腾出空间的内容。任何负边距或宽度大于 100% 的诡计要么根本不起作用，要么将您的某些内容放在许多浏览器中的非透明滚动条下方(在其他浏览器中则位于屏幕外)。

如果滚动条出现时的“跳转”太让人分心，您可以使用 overflow-y:scroll 强制滚动条始终存在。