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

Question

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

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>

Answer 2

您可以尝试隐藏滚动条，或者将其混合到背景中。当父容器悬停时，您可以简单地添加背景颜色将其弹出。

示例代码如下：

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 
          }
      }
}

结果：http://recordit.co/U9LpHMKG9d

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

Dynamic scrollbar on hover causing jumping effect on content

html

css

overflow