html - 悬停时的动态滚动条对内容造成跳跃效果

Question

有没有办法避免这种场景下hover添加滚动条时的上跳/下跳效果？我知道它占用了滚动条区域的空间，但希望通过巧妙地使用定位或填充或其他东西来避免它，但到目前为止还没有成功。要重新创建，请参见下面的示例，滚动到该部分的底部，然后将鼠标移出和移入以查看其中内容的上下跳动。

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>