Question

在这种情况下，是否有办法避免在悬停时添加滚动条时引起的向上/向下跳动效果？我知道它占用了滚动条区域的空间，但是希望通过巧妙地使用定位或填充或其他方式来避免滚动条区域，但到目前为止仍未成功。要重新创建，请参见下面的示例，滚动到该部分的底部，然后向内和向外滚动鼠标，以查看其中内容的上移和下移。

export default function preferenceReducer(state = { ...defaultState }, action = {}) {
    // console.log("reduces is called")
    switch (action.type) {
        case UPDATE_PREFERENCES :
            return { ...state, ...action.preferences };
        default:
            return state;
    }
}

// Action creators
export function updatePreferencesAction(preferences) {
    return { type: UPDATE_PREFERENCES, preferences };
}

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

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

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

2 个答案: