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

但不起作用。我设置了一个Codepen进行演示：

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

Answer 2

编辑：

如果我们不能将高度设置为固定值，我们还可以使用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>

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

2 个答案: