unwanted scrollbar right margin

问题

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.

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>

回答1:

Not sure whatever the reason is but the css that's causing it is this

* {
    margin: 0;
    padding: 0;
}

I was able to fix it by specifying the margins that has zero (excluding the margin-right)

like this

* {
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    padding: 0;
}

回答2:

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.

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:

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

Consider the following:

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

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.

As far as a solution goes though, I believe I have one:

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.

Your new markup looks like this:

<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>

and your 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.

来源：https://stackoverflow.com/questions/57353669/unwanted-scrollbar-right-margin

标签

html

css

grid

scrollbar

css-grid