即使将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:&nbsp;translateY(-45%);代替transform:&nbsp;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 {&nbsp; background: red;}然后你可以给内容一个可见的边框（只是为了调试，让你看到它的边缘在哪里）.content {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; height: 50%;&nbsp; &nbsp; width: 300%;&nbsp; &nbsp; top: 100px;&nbsp; &nbsp; background: yellow;&nbsp; &nbsp; z-index: 10; // this doesn't fix it either&nbsp; &nbsp; border: 2px solid red; // just for debugging}完成此操作后，当您更改滚动条的高度时，您会注意到，内容的边框底部将不再可见，这是因为滚动条越过了它。一个可能的解决方法是为内容指定一个高度值，单位为 px 或 em...（除了 % 以外的任何值）.content {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; height: 100px; // height not in %}

Answer 4

我解决了由于高度而被推高的问题。这是我的第一篇文章，请大家支持我。::-webkit-scrollbar{width: auto;height: 0px;}