即使将overflow-x设置为overlay，自定义水平滚动条仍然会向上推内容

Question

我有一个 div，其中包含超出屏幕右侧的内容。因此，我使用位于屏幕底部的自定义水平滚动条来导航到 div 的末尾。问题是我的自定义水平滚动条将我的内容向上推。为了解决这个问题，我认为只需将overflow-x从自动或滚动更改为覆盖，这样滚动条就不会占用任何物理空间/移动内容......但不幸的是，这不起作用。要查看微妙的变化，请将自定义滚动条的高度从 5% 更改为 0%，您将看到黄色 div 发生了变化。知道为什么会发生这种情况吗？我不希望滚动条移动我的任何内容，这就是我认为覆盖所完成的。澄清一下，我不想删除滚动条。我需要滚动条。问题是滚动条稍微向上移动了我的内容。这是非常微妙的，您可以看到它发生的方式是删除滚动条，您会看到内容发生了移动。如果没有滚动条，我需要内容准确地位于该位置，但我需要滚动条。如果您仍然很难看到这种变化，请将滚动条的高度更改为极端值，例如 50%。那就不可能错过了。JSFiddle： https: //jsfiddle.net/8kcmpquL/  <div id="horizontalstorecontainer">    <div class="store-scrolling-wrapper">      <div class="content">      </div>    </div>  </div>::-webkit-scrollbar {  height: 5%;}::-webkit-scrollbar-track {  background: transparent;}::-webkit-scrollbar-thumb {  background: white;}#horizontalstorecontainer {  z-index: 0;  position: fixed;  left: 0;  right: 0;  top: 0;  bottom: 0;  width: 100%;  height: 100%;  display: flex;  align-items: center;  background: red;}.store-scrolling-wrapper {  overflow-x: overlay;  overflow-y: hidden;  white-space: nowrap;  text-align: center;  margin: 0 auto;  height: 100%;  width: 100%;  -webkit-overflow-scrolling: touch;  -ms-overflow-style: none;  background: blue;}.content {    position: relative;    height: 60%;    width: 300%;    top: 50%;    transform: translateY(-50%);    background: yellow;}

Answer 1

我不知道如何使 ::webkit-scrollbar 按照您的要求不占用空间。但是您可以通过更改用于居中内容的属性
的值来轻松解决此问题。transform

例如，如果您想使用高度为 5% 的条形，则编写：

transform: translateY(-45%);

代替

transform: translateY(-50%);

Answer 2

我只有当我在溢出上使用“显示”时，当我使用“覆盖”滚动按钮和黄色内容触摸时，即使在 50% 时，它们之间也没有空格。

覆盖不被视为有效值：

overlay: non-standard value only supported by the WebKit-browsers that does the same as auto.

Answer 3

当我使用您的代码对其进行测试时，我没有注意到内容有任何变化。它的内容保留在原来的位置...所以要么是您没有上传正确的代码，要么可能一开始就没有这样的问题...

但如果您仍然遇到问题，请尝试将其添加到 CSS 中：

已编辑

所以实际上并没有将你的内容向上推，事实上，overflow-x: overlay只是给出了预期的结果。只是scrollbar-track检查内容而不是推动它。将 的背景颜色更改scrollbar-track为透明以外的颜色，然后查看它覆盖您的元素。

::-webkit-scrollbar-track {

  background: red;

}

然后你可以给内容一个可见的边框（只是为了调试，让你看到它的边缘在哪里）

.content {

    position: relative;

    height: 50%;

    width: 300%;

    top: 100px;

    background: yellow;

    z-index: 10; // this doesn't fix it either

    border: 2px solid red; // just for debugging

}

完成此操作后，当您更改滚动条的高度时，您会注意到，内容的边框底部将不再可见，这是因为滚动条越过了它。

一个可能的解决方法是为内容指定一个高度值，单位为 px 或 em...（除了 % 以外的任何值）

.content {

    position: relative;

    height: 100px; // height not in %

}

Answer 4

我解决了由于高度而被推高的问题。这是我的第一篇文章，请大家支持我。

::-webkit-scrollbar{

width: auto;

height: 0px;}