跨浏览器滚动条不一致

Question

我知道已经问过这个问题，但是我还没有找到可接受的解决方案。因此，在IE和Firefox中，滚动条会覆盖内容。其他浏览器，例如Chrome，Edge将滚动条放置在内容的外部。

在这种情况下，我对垂直滚动条感到满意。 前提是“内容”对于“宽度”没有绝对值（“自动”或“ 100％”）

到目前为止，我发现使滚动条跨浏览器外观保持一致的唯一解决方案是为重叠内容的浏览器自动向重叠的“可滚动”内容添加填充。预定义的CSS，用于“内容”属性“ width：auto”

//in this case we have overflow-y and approx width of the scrollbar is 17px
if(content.clientWidth < content.offsetWidth)
{
content.paddingRight=17+'px')
}

这种方法在IE和FF中有效，但由于对“ clientWidth”和“ offsetWidth”的解释不同，因此不适用于Chrome和Edge。

“脏”解决方案可能只是添加检测到的浏览器类型的条件，并相应地执行上面列出的脚本。 但是对我来说，这似乎不是最优雅的解决方案。 我非常感谢您的建议。