Chrome Extension Scrollbar Placement_问答_开发者

开发者 https://www.devze.com 2023-02-22 19:23 出处：网络

After dabbling in Chrome Extens开发者_运维技巧ions I\'ve noticed that when the data inside the Page Action gets to a certain point the scroll bars automatically attach themselves to the popup, this I

After dabbling in Chrome Extens开发者_运维技巧ions I've noticed that when the data inside the Page Action gets to a certain point the scroll bars automatically attach themselves to the popup, this I expect. However, instead of pushing the content to the left of the scroll bar it overlays the content causing a horizontal scrollbar to become active. I ended up just adding a check on my data and applying a css class to push the content to the left more to run parallel to the scroll bar and beside it not under it. What is the correct way to handle this besides my hackish solution?

I was wondering this myself too. Currently I just don't put anything important closer than 20px to the right side of a popup and disable horizontal scrollbars:

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

So when a vertical scrollbar appears the content at least doesn't jump.

Perhaps you need to specify a width on the scrollbar.

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

I haven't found a way to do this that isn't a hack, but here's the simplest hack I could think of:

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

The idea is to detect whether the vertical scrollbar is in use, and if it is, calculate its width and allocate just enough extra padding for it.