Chrome扩展滚动条放置

Chrome Extension Scrollbar Placement

本文关键字：滚动条 扩展 Chrome      更新时间：2023-09-26

在涉足Chrome扩展后，我注意到，当页面操作中的数据达到一定程度时，滚动条会自动附加到弹出窗口，这是我所期望的。但是，它不是将内容推到滚动条的左侧，而是覆盖内容，从而使水平滚动条变为活动状态。我最后只是在我的数据上添加了一个检查，并应用了一个css类来将内容推到左边，以便与滚动条并行运行，并且在滚动条旁边而不是在滚动条下面。除了我的hackish解决方案，还有什么正确的方法来处理这个问题?

我也在想这个问题。目前，我只是不把任何重要的东西放在距离弹出窗口右侧20px的地方，并禁用水平滚动条:

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

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

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

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

我还没有找到一种不是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()">

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

相关文章：