Динамическая полоса прокрутки при наведении, вызывающая эффект прыжка на содержимом

Question

Есть ли способ избежать эффекта прыжка вверх / вниз, вызванного добавлением полосы прокрутки при наведении курсора в этом сценарии? Я понимаю, что она занимает пространство области полосы прокрутки, но старается избежать этого с помощью некоторого умного использования позиционирования или отступов или чего-то еще, и до сих пор безуспешно. Чтобы воссоздать, см. Пример ниже, прокрутите до конца раздела и наведите указатель мыши вверх и вниз, чтобы увидеть скачок вверх и вниз содержимого внутри него.

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>

Answer 1

Вам просто нужно добавить отступ, равный размеру полос прокрутки справа и снизу, а затем убрать его при наведении курсора:

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>