CODEWITHSUNDEEP
htmlcssoverflow
Chris W.
Chris W.

Reputation: 23280

Dynamic scrollbar on hover causing jumping effect on content

Is there a way to avoid the jumping up/down effect caused when the scrollbar is added on hover in this scenario? I understand it's taking the space of the scrollbar area but looking to avoid it with some clever use of positioning or padding or something and so far been unsuccessful. To recreate, see example below, scroll to the bottom of the section and mouse out & in to see the jumping up and down of the content inside it.

section {
  height: 10rem;
  width: 10rem;
  margin: 1rem auto;
  border: gray 1px solid;
  overflow: hidden;
  white-space: nowrap;
}

section:hover {
  overflow: auto;
}

nav {
  border: red 1px dashed;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
<section>
  <nav>
    <ul>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Mouse in / out</li>
      <li>Watch me jump up / down</li>
     </ul>
   </nav>
</section>

Upvotes: 1

Views: 1428

Answers (2)

Nivek Mozart
Nivek Mozart

Reputation: 37

You can try hiding the scrollbar, or blend it in the background. When the parent container is hovered, you can then simply add a background color to pop it up.

Example code below:

HTML (index.html):

<ul>
<li>test<li>
<li>test<li>
<li>test<li>
<li>test<li>
<li>test<li>
<li>test<li>
<li>test<li>
<li>test<li>
</ul>

SCSS / SASS (style.scss):

ul {
   height: 100px; // set limit height
   overflow: auto; // creates scroll
      &::-webkit-scrollbar {
          width: 10px; // this basically the width of the scroll bar
      }

      &:hover { // activate if "<ul/>" is hovered
          &::-webkit-scrollbar { // refers to the scrollbar 
              background: white; //  add background
          }
          &::-webkit-scrollbar-thumb { // refers to the thumb within scrollbar
              background: orange; // add background 
          }
      }
}

Result: http://recordit.co/U9LpHMKG9d

Upvotes: 1

Pete
Pete

Reputation: 58432

You just need to add some padding equal to the size of scrollbars on the right and bottom, then remove it on hover:

section {
  height: 10rem;
  width: 10rem;
  margin: 1rem auto;
  border: gray 1px solid;
  overflow: hidden;
  white-space: nowrap;
}

nav {
  border: red 1px dashed;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0 20px 20px 0;
}

section:hover {
  overflow: auto;
}

section:hover ul {
  padding: 0;
}
<section>
  <nav>
    <ul>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Scroll to bottom</li>
      <li>Mouse in / out</li>
      <li>Watch me jump up / down</li>
    </ul>
  </nav>
</section>

Upvotes: 2

Related Questions