不需要的滚动条右边距 [英] unwanted scrollbar right margin

问题描述

在我的远程服务器和localhost上，使用overflow-scroll连接到我的容器的滚动条似乎在右边有一个空白，这导致背景色显示出来.

On my remote server and localhost, the scrollbar attached to my container with overflow-scroll seems to have a margin on the right which is causing the background color to show through.

在这里-在代码段上-代码相同，但是没有这样的余量.

Here - on code snippet - the code is identical but there is no such margin.

编辑: 行为基于

EDIT : behavior expanded upon

调整浏览器的大小时，随着元素调整大小，背景色会在滚动条的右侧闪烁，并闪烁.

When the browser is resized, the background color flashes in and out to the right of the scrollbar as the element resizes.

此外，当鼠标以窗口宽度释放时，其中背景未显示在元素右侧，则行为在下一次调整大小时仍然存在.但是，当鼠标以一定的窗口宽度释放时，其中背景显示在元素的右侧，滚动条会跳到右侧以覆盖背景并使其自身在其所属的右边缘对齐，然后在以后重新调整浏览器大小之前，该行为似乎都是固定的.

Furthermore, when the mouse is released at a window width wherein the background is not showing to the right of the element, the behavior persists on the next resize. But when the mouse is released at a window width wherein the background is showing to the right of the element, the scrollbar jumps to the right to cover the background and justify itself to the right edge where it belongs, and then the behavior seems to be fixed for all future resizing until the browser is refreshed.

此外，该行为在每次刷新时都不存在.这似乎是随机的，每2-3次刷新中大约有1次.

Additionally, the behavior is not present on every refresh. It seems to be random, about 1 out of every 2-3 refreshes.

那么，为什么在调整大小时背景色显示在滚动条的右侧?为什么在背景暂时显示时释放鼠标可以解决除非刷新页面的问题?

So then, why does the background color show to the right of the scrollbar during resize? And why does releasing the mouse when the background is showing temporarily fix the issue barring a page refresh?

*{
	margin:0;
	padding:0;
}
.grida{
	display:grid;
	grid-template-columns:14% 1fr 1fr;
	height:calc(100vh - 52px);
}
.bpart{
	height:calc(100vh - 52px);
	overflow-y:scroll;
	background:blue;
}

<div class='grida'>
<div class='gridaa'></div>

<div class='gridab'>
<div class='bpart'></div>
</div>

<div class='gridac'></div></div>

推荐答案

这确实是一种非常奇怪的行为，我必须承认我花了很长时间试图弄清楚这一点.不用担心，下面有针对您特定问题的解决方案，尽管回答您的问题对我提出了更多问题.

This is indeed a very bizarre behavior, and I must admit I spent a long time trying to figure this one out. Fear not, there is a solution to your specific issue below, though answering your question has raised more questions for me.

据我所知，您只是在观察像素舍入行为，这在所有浏览器中调整固定宽度与流体宽度元素的大小时都是很自然的.我看到的垂直线"仅在调整浏览器窗口大小时存在.无论将grid-template-columns值设置为什么，给定当前的标记和样式，您将永远无法在所有断点处满足浏览器的固定宽度.

As far as I can tell, you're simply observing pixel rounding behavior, which is natural in all browsers when resizing fixed width vs fluid width elements. The "vertical line" as I see it is only present when resizing the browser window. Whatever the grid-template-columns value is set to, you will never be able to satisfy the fixed width of the browser at all breakpoints given your current markup and style.

这可以通过非常简单的数学来证明:

This can be demonstrated by very simple math:

让x =浏览器宽度(像素)
令y =流体网格宽度值(％)
令z =流体网格的实际宽度值(px)
z = x(y)

let x = browser width (px)
let y = fluid grid width value (%)
let z = fluid grid actual width value (px)
z = x(y)

请考虑以下内容:

x = 1500px
y = 15％
1500(.15)= 225

x = 1500px
y = 15%
1500(.15) = 225

如果将网格宽度设置为15％，则当浏览器窗口正好为1500px时，网格元素将为225px宽，并且不会溢出到相邻像素中.但是，当将浏览器的大小调整为1497px，然后再调整为1496px时，它必须选择将网格元素的精确舍入到完整像素宽度的位置，该宽度从224.55px变为224.4px.这似乎抵消了溢出容器内的滚动条，由于某些原因，(希望有经验的人可以解释)不会在调整大小时粘在容器的右侧.一旦确定了新的宽度，滚动条便会自动将其重置到容器的右侧.确实，这是一种奇怪的行为，如果有人会扩大我的答案以解释为什么这种行为首先存在，我很乐意.

If your grid width is set at 15%, when the browser window is exactly 1500px the grid element will be 225px wide, and will not overflow into the adjacent pixel. However, when the browser is resized down to 1497px and then to 1496px, it must choose where exactly to round to a full pixel width for the grid element, which moves from the 224.55px to 224.4px. This seems to offset the scrollbar inside the overflow container, which for some reason (that hopefully someone more knowledgeable can explain) does not stick to the right side of the container on resize. As soon as the new width is established the scrollbar resets itself to the right side of the container. This is a strange behavior indeed, and I'd love if someone would expand on my answer to explain why this behavior exists in the first place.

就解决方案而言，我相信我有一个解决方案:

只需在bpart div中添加一个全角，全高元素，然后为其分配背景，而不是作为父元素的bpart.此外，最重要的是，bpart保持滚动属性，而其新的子元素将具有overflow:hidden属性.

Simply add a full-width, full-height element within your bpart div and assign the background to that instead of the bpart, which becomes the parent. Furthermore, and most importantly, bpart maintains the scroll property while its new child element will have an overflow:hidden property.

您的新标记如下:

<div class='grida'>

  <div class='gridaa'></div>

  <div class='gridab'>
    <div class='bpart'>
      <div class="bpart-inner"></div>
    </div>
  </div>

  <div class='gridac'></div>

</div>

和您的CSS:

* {
  margin:0;
  padding:0;
}
.grida {
  display:grid;
  grid-template-columns:14% 1fr 1fr;
  height:calc(100vh - 52px);
}
.bpart {
  height:calc(100vh - 52px);
  overflow-y:scroll;
}
.bpart-inner {
  height:100%;
  width:100%;
  overflow:hidden;
  background:blue;
}

据我所知，这行得通.这是一个小提琴:

This works, as far as I can tell. Here is a fiddle:

https://jsfiddle.net/x6eL5mun/4/

就像我说的那样，我无法解释默认行为.如果有人可以，那么我和您一样有兴趣.否则，此解决方案应为您完成.感谢您在这里表达我的兴趣.

Like I said, I cannot explain the default behavior. If someone can then I'm just as interested as you. Otherwise, this solution should do it for you. Thanks for piquing my interest here.

这篇关于不需要的滚动条右边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！