CODEWITHSUNDEEP
css
abe1432181
abe1432181

Reputation: 1316

CSS How to prevent background showing through when scrollbar is active

Does anyone know how to remove the thin gap to the left of the scrollbar that is letting the background through (showing green on this example)?

.menu {
   min-width: 195px;
   max-height: 200px;
   overflow: auto;
   position: fixed;
   background-color: #F9F9F9;
   border: solid 1pt yellow;
}

.button {
  border: solid 1px white;
  min-width: 200px;
}

body {
  background-color: green;
}


<div id="x" class="menu" style="top: 100px; left: 100px;">
   <div class="button">a</div>
   <div class="button">b</div>
   <div class="button">c</div>
   <div class="button">d</div>
   <div class="button">e</div>
   <div class="button">f</div>
   <div class="button">g</div>
   <div class="button">h</div>
   <div class="button">i</div>
   <div class="button">j</div>
   <div class="button">k</div>
   <div class="button">l</div>
   <div class="button">m</div>
   <div class="button">n</div>
   <div class="button">o</div>
   <div class="button">p</div>

A running example of this can be found on https://jsfiddle.net/Abeeee/f9jtsrw0/29/

Upvotes: 1

Views: 33

Answers (2)

Peter Pointer
Peter Pointer

Reputation: 4170

It seems like a bug to me but I replaced:

border: solid 1pt yellow;

from your .menu with:

border: solid 1px yellow;

The pt seems to make rounding errors occur.

Upvotes: 1

Mech
Mech

Reputation: 4015

I've added border-right: 0pt; to the menu css which removes the right border.

.menu {
  width: 200px;
  height: 195px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: fixed;
  background-color: #F9F9F9;
  border: solid 1pt yellow;
  border-right: 0pt;
}
.button {
  border: solid 1px white;
  width: 200px;
}
 body {
  background-color: green;
}
.background {
  background-color: white;
  z-index: -1;
}
<div id="x" class="menu" style="top: 100px; left: 100px;">
  <div class="background">
  <div class="button">a</div>
  <div class="button">b</div>
  <div class="button">c</div>
  <div class="button">d</div>
  <div class="button">e</div>
  <div class="button">f</div>
  <div class="button">g</div>
  <div class="button">h</div>
  <div class="button">i</div>
  <div class="button">j</div>
  <div class="button">k</div>
  <div class="button">l</div>
  <div class="button">m</div>
  <div class="button">n</div>
  <div class="button">o</div>
  <div class="button">p</div>
  </div>
</div>

Upvotes: 1

Related Questions