html - CSS 防止水平滚动条下推内容

Question

我设计了自己的水平滚动条，它会在悬停容器时出现。我的 SCSS:

.container {
  width: 600px;
  /* the height cannot be fixed */
  overflow-y: hidden;
  overflow-x: hidden;
  &:hover, &:focus {
    overflow-x: auto;
    /*Scroll bar nav*/
    &::-webkit-scrollbar {
      height: 10px;
    }               
    /* Track */
    &::-webkit-scrollbar-track {
      background: #fafafa;   
    }
    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;;  
    }
    /* hover effect for scrollbar thumb */
    &::-webkit-scrollbar-thumb:hover   {
      background-color: #7c7b7c;
    }
  }
}

.content {
  width: 1200px;
}

它工作正常，但是当滚动条出现时，它会将其下方的内容下推。如何在不推送内容的情况下使滚动条出现在容器内？

我试过:

::-webkit-scrollbar { position: absolute; }

或

::-webkit-scrollbar { position: fixed; }

但它不起作用。我为演示设置了一个代码笔:

https://codepen.io/anon/pen/OemWgR

注意:容器不能有固定的高度。

Answer 1

我找到了解决方案。我必须将溢出设置为自动并将自定义滚动条高度放在悬停选择器之外，以便为其生成空间。我只在悬停选择器中添加滚动条样式以使其可见。

.container {
  width: 600px;
  /* the height cannot be fixed */
  overflow-y: hidden;
  overflow-x: auto;
  /*Scroll bar nav*/
  &::-webkit-scrollbar {
    height: 10px;
  } 
  &:hover, &:focus {                    
    /* Track */
    &::-webkit-scrollbar-track {
      background: #fafafa;   
    }
    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;;  
    }
    /* hover effect for scrollbar thumb */
    &::-webkit-scrollbar-thumb:hover   {
      background-color: #7c7b7c;
    }
  }
}