如何使用 css 偏移滚动条宽度？

Question

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.图像所在的容器在左侧和右侧有 4% 的边距，但滚动条显示在右侧。

Answer 1

I figured out a solution to my problem that did not involve knowing the width of the scroll bar.我想出了一个不涉及知道滚动条宽度的问题的解决方案。

First of all the question was poorly formulated for 2 reasons:首先，这个问题的表述很糟糕，原因有两个：

On mobile devices the scrollbar is not the same as on large screens so it does not get in the way在移动设备上，滚动条与大屏幕上的滚动条不同，因此不会妨碍您
It did interfere with my lightbox plugin (fancybox) but the solution is much simpler它确实干扰了我的灯箱插件（fancybox），但解决方案要简单得多

If anyone comes here because of a similar issue, the solution was to apply如果有人因为类似的问题来到这里，解决方案是申请

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

to the <body> tag instead of html as the lightbox plugin could overwrite it that way once you click on an image.到<body>标签而不是html ，因为一旦您单击图像，灯箱插件可能会以这种方式覆盖它。

如何使用 css 偏移滚动条宽度？

问题描述

1 个解决方案

解决方案1
0 2021-01-31 11:04:10

如何使用 css 偏移滚动条宽度？

问题描述

1 个解决方案

解决方案1 0 2021-01-31 11:04:10

解决方案1
0 2021-01-31 11:04:10