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

编辑：

如果我们无法将高度设置为固定值，我们也可以使用jQuery或原生JavaScript来动态改变高度。

例如 jQuery:

 $(() => {
    let h = $('.container').height() + 10 // plus the height of scrollbar
    $('.container').css({'height': h+'px'})
  })

原回答：

给容器框一个固定的高度值，比如100px，如下：

.container {
  width: 600px;
  position: relative;
  overflow-y: hidden;
  overflow-x: hidden;
  height: 100px;
}

$(() => {
  let h = $('.container').height() + 10 // plus the height of scrollbar
  $('.container').css({'height': h+'px'})
})

.container {
  width: 600px;
  position: relative;
  overflow-y: hidden;
  overflow-x: hidden;
  border: 2px solid teal;
}

.container:hover,
.container:focus {
  overflow-x: auto;
  /*Scroll bar nav*/
  /* Track */
}

.container::-webkit-scrollbar {
  height: 10px;
}

.container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background: #fafafa;
}


/* Handle */

.container::-webkit-scrollbar-thumb {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #c1c1c1;
  ;
}


/* hover effect for scrollbar thumb */

.container::-webkit-scrollbar-thumb:hover {
  background-color: teal;
}

.content {
  width: 1200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="content">
    <p>Vestibulum fringilla sit amet augue. Cras non dolor. Aenean ut eros et nisl sagittis vestibulum. Sed mollis, eros
      et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Cras varius. Vestibulum
      fringilla sit amet augue.
      Cras non dolor. Aenean ut eros et nisl sagittis vestibulum. Sed mollis, eros et ultrices tempus, mauris ipsum
      aliquam libero, non adipiscing dolor urna a orci. Cras varius.</p>
  </div>
</div>

<div>
  <p>This content is being pushed down by the scrollbar &#9785; &#9785; &#9785;</p>
</div>

Answer 2

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

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

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

CSS prevent horizontal scrollbar from pushing down content

html

css

webkit

google-chrome

scrollbar