Question

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

Answer 1

我自己也在想这个。目前我只是不要将任何重要的东西放在弹出窗口右侧20px以外，并禁用水平滚动条：

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

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

Answer 2

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

<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()">

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

Answer 3

也许您需要在滚动条上指定宽度。

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

Chrome扩展程序滚动条放置

3 个答案: