Can I hide the gutter when using "scroll-bar gutter: stable"?

user_18520760 0
Viewed 231

Problem

To avoid the appearance and disappearance of the scrollbar changing my layout, I have tried using scrollbar-gutter: stable. It works, but the reserved space for the scrollbar cuts through the right edge of my header.

Any way to avoid this? Can I hide the gutter beneath the header? Or perhaps tie it to just the main container, so the header always takes up 100% width of the browser window?

Note: To see the problem, you will need to see the snippet result as 'full page'.

Thanks,

html {
  scrollbar-gutter: stable
  }

body {
  background-color: #dadbd6;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  background: #C0081C;
  padding: 0 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  filter: drop-shadow(0 3px 5px #bbb);
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  color: #fff;
  padding: 0 20px; 
  text-decoration: none; 
}

.top {
margin-top: 100px;
}
<nav>
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
  </ul>
</nav>

<div class="top">
<p>Here there'll be content. Sometimes a scrollbar will be displayed, but not always.</p>

<p>I have reserved space for it on the right using 'scrollbar-gutter: stable', but the gutter ploughs right through my fixed header.</p>

<p>Can I put the reserved space beneath the header? Or tie it to the main container, i.e. make it ignore the fixed header?</p>   
</div>

css html
1 Answers

You are using nav with position: fixed, but only from the top position. So, you also need to add left: 0; this will shift your navigation to the left. Scrollbar-gutter: stable; works fine in Firefox, but there is a problem in Chrome, it could be a bug or feature of Chrome. Try customizing the scrollbar instead of scrollbar-gutter: stable;. The result should be the same.

::-webkit-scrollbar {
  width: 0.5rem;
}
::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, #c0081c 80px, #dadbd6 80px, #dadbd6 100%);
}
::-webkit-scrollbar-thumb {
  border-radius: 0.815rem;
  background-color: #484845;
}

html {
  /* scrollbar-gutter: stable; */
  overflow-y: scroll;
  overflow-x: hidden;
  background: #dadbd6;
}


::-webkit-scrollbar {
  width: 0.5rem;
}
::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, #c0081c 80px, #dadbd6 80px, #dadbd6 100%);
}
::-webkit-scrollbar-thumb {
  border-radius: 0.815rem;
  background-color: #484845;
}

html {
  /* scrollbar-gutter: stable; */
  overflow-y: scroll;
  overflow-x: hidden;
  background: #dadbd6;
}

nav {
  position: fixed;
  top: 0;
  left: 0; /* new line */
  width: 100%;
  height: 80px;
  background: #c0081c;
  padding: 0 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  filter: drop-shadow(0 3px 5px #bbb);
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  color: #fff;
  padding: 0 20px;
  text-decoration: none;
}

.top {
  margin-top: 100px;
}
<nav>
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
  </ul>
</nav>

<div class="top">
  <p>Here there'll be content. Sometimes a scrollbar will be displayed, but not always.</p>

  <p>
    I have reserved space for it on the right using 'scrollbar-gutter: stable', but the gutter ploughs right through my fixed header.
  </p>

  <p>
    Can I put the reserved space beneath the header? Or tie it to the main container, i.e. make it ignore the fixed header?
  </p>
</div>

user_155451160
Related