展开滚动条

Question

每当我有内容扩展页面高度时，我的渲染网站上会出现一个滚动条。但是，滚动条将我的内容按向左滚动条的宽度，因此当我导航到页面高度小于页面高度的页面时，页面宽度调整后会有明显的跳转。是否可以让滚动条位于我所有的html内容之上？与iOS上Chrome浏览器的工作方式类似。

理想情况下，overflow:absolute这样的css属性会显示滚动条并且内容不会被剪裁，但是我知道它不存在。

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

我与我的一位同事一起推荐了与我相同版本的Chrome，他的滚动条完全符合我的要求。也许在Google的测试中进行AB测试？

Answer 1

没有可靠的跨浏览器方式来执行您正在寻找的内容。

不同的浏览器处理滚动条的方式不同 - 有些（包括Safari和某些版本的Chrome）已经完全按照您的要求执行，大多数其他浏览器强制执行滚动条的特定背景颜色和宽度（并不总是相同的宽度）并推送内容过来腾出空间。任何负边距或宽度大于100％的欺骗要么根本不起作用，要么将一些内容放在许多浏览器中的非透明滚动条下面（而在其他浏览器中放在屏幕外）。

如果滚动条出现时“跳转”过于分散注意力，您可以强制滚动条始终与overflow-y:scroll一起出现。

Answer 2

原生滚动条样式是有限的，但这是一个如何做的演示：

body::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; }

http://codepen.io/zakkain/pen/phjBC

Chrome和IE很好地回应了它。 Firefox没有那么多，问题记录在这里https://bugzilla.mozilla.org/show_bug.cgi?id=77790并且过时了。

如果你想使用firefox，你必须使用自定义滚动条替换器。

此处解释了如何补偿滚动条：How to compensate for Vertical Scrollbar when it is not yet present

效果很好，但大多数代码笔都无法显示，所以你必须自己试验。

这是OSX消失的滚动条问题（不确定它是否与现代版本的OSX相关）：CSS - Overflow: Scroll; - Always show vertical scroll bar?

Answer 3

事实证明，我所要做的就是更新我的OSX版本......莫名其妙。我会接受@ DanielBeck的答案，因为它是编码问题的合理答案，而在这里，解决方案是任意更新我的笔记本电脑软件。