时间戳

首页 > 解决方案 > How to offset for scrollbar width with css?

html - How to offset for scrollbar width with css?

问题描述

I had to set these properties and make my scrollbar appear on top of the page because it was making my lightbox jitter when I clicked on an image.

html {
 overflow-y: scroll;
 overflow-y: overlay;
}

However on mobile this makes it seem like I have no margin on the right as it appears behind the scrollbar.

Is there a way that I can offset my content on the right to match the scrollbars width, while still keeping it on top of everything?

A screenshot of the issue

The container the images are inside has 4% margin on the left and right but the scrollbar is displaying over it on the right.

标签： htmlcsstwitter-bootstrap

解决方案

我想出了一个不涉及知道滚动条宽度的问题的解决方案。

首先，这个问题的表述很糟糕，原因有两个：

  1. 在移动设备上，滚动条与大屏幕上的滚动条不同，因此不会妨碍您
  2. 它确实干扰了我的灯箱插件（fancybox），但解决方案要简单得多

如果有人因为类似的问题来到这里，解决方案是申请

overflow-y: scroll;
overflow-y: overlay;

到<body>标签，而不是html作为灯箱插件可以在您单击图像后以这种方式覆盖它。

推荐阅读