Chrome 扩展滚动条放置答案

【问题标题】：Chrome Extension Scrollbar PlacementChrome 扩展滚动条放置
【发布时间】：2011-07-30 03:00:47
【问题描述】：

在涉足 Chrome 扩展程序之后，我注意到当页面操作中的数据到达某个点时，滚动条会自动将自己附加到弹出窗口，这是我所期望的。但是，它不会将内容推到滚动条的左侧，而是覆盖内容，从而导致水平滚动条变为活动状态。我最终只是对我的数据添加了一个检查并应用了一个 css 类来将内容更多地推到左侧，以与滚动条平行运行，而不是在它旁边而不是在它下面。除了我的骇人听闻的解决方案之外，处理这个问题的正确方法是什么？

【问题讨论】：

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

我自己也想知道这个。目前我只是没有将任何重要的东西放在弹出窗口右侧 20px 的位置并禁用水平滚动条：

body {overflow-x:hidden;overflow-y:auto;}

所以当垂直滚动条出现时，内容至少不会跳转。

【讨论】：

唯一的问题是当没有足够的内容导致溢出时，它会在右侧创建空白空间。这基本上是我在我建议的骇人听闻的解决方案之前所做的事情。

【解决方案2】：

也许你需要在滚动条上指定一个宽度。

::-webkit-scrollbar {
    width: 42px; //Do not know actual width, but I assume you do
}

【讨论】：

【解决方案3】：

我还没有找到一种不是 hack 的方法，但这是我能想到的最简单的 hack：

<script type="text/javascript">
function tweakWidthForScrollbar() {
  var db = document.body;
  var scrollBarWidth = db.scrollHeight > db.clientHeight ?
      db.clientWidth - db.offsetWidth : 0;
  db.style.paddingRight = scrollBarWidth + "px";
}
</script>
...
<body onresize="tweakWidthForScrollbar()">

这个想法是检测垂直滚动条是否正在使用，如果是，则计算其宽度并为其分配足够的额外填充。

【讨论】：

这在 Chrome 中不起作用，db.clientWidth - db.offsetWidth 返回 0。