Question

我有两个具有水平滚动的div。

我想隐藏滚动条并做到这一点，我使父级的高度略小，并添加了隐藏的溢出。

这在大多数情况下都有效，但是如果在一个滚动div中，我有一个相对位置的元素，它将显示滚动条。

如果您没有水平滚动鼠标或触控板，请在此处创建一个gif：http://recordit.co/PZeqITL3aA

该代码也在Codepen上： https://codepen.io/anything/pen/yqNzLR?editors=1100

此外，我也可以采用这种HTML结构隐藏滚动条，但我需要相对于最后一个元素的位置，因为我想添加一些绝对位于其上方的下拉菜单。

这仅发生在Mac和Android设备上的Google Chrome浏览器上。

谢谢！

.wrap {
  position: relative;
  display: flex;
  background: rgba(0, 0, 255, 0.2);
  max-width: 640px;
  margin: 0 auto;
  height: 180px;
  overflow: hidden;
}

.overflow {
  width: 50%;
  position: relative;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.overflow__wrap {
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  height: 200px;
}
.overflow__content {
  padding: 10px;
  white-space: nowrap;
}
.overflow--1 {
  background: rgba(0, 128, 0, 0.2);
  /*
    * If I add position relative to any of the child elements, the scroll will be visible. WTF?
    */
}
.overflow--1 button {
  position: relative;
}
.overflow--2 {
  background: rgba(0, 0, 255, 0.2);
}
.overflow button {
  display: inline-block;
  border: 1px solid #ccc;
  min-height: 160px;
  background: #fff;
  padding: 1em;
  width: 200px;
}

<div class="wrap">
  <div class="overflow overflow--1">
    <div class="overflow__wrap">
      <div class="overflow__content">
        <button>Scroll horizontally</button>
        <button>Horizontal scroll visible under</button>
        <button>Horizontal scroll visible under</button>
        <button>Horizontal scroll visible under</button>
      </div>
    </div>
  </div>
  <div class="overflow overflow--2">
    <div class="overflow__wrap">
      <div class="overflow__content">
        <button>Horizontal scroll hidden</button>
        <button>Yes, really</button>
        <button>Yes, really</button>
        <button>Yes, really</button>
      </div>
    </div>
  </div>
</div>
<br/><br/><br/>
<p>Snippet end</p>

如果您想通过“运行摘要”在此处看到此内容，请确保垂直滚动一下，因为iframe会剪切滚动条。

Answer 1

您可以摆脱overflow的{{1}}位置，并将其保留给relative元素（将来的div）。然后，滚动条将消失，您将能够使用与每个列表项（当前为button元素）相关的任何嵌套块定位。

button

.wrap {
  position: relative;
  display: flex;
  background: rgba(0, 0, 255, 0.2);
  max-width: 640px;
  margin: 0 auto;
  height: 180px;
  overflow: hidden;
}

.overflow {
  width: 50%;
  position: static;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.overflow__wrap {
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  height: 200px;
}
.overflow__content {
  padding: 10px;
  white-space: nowrap;
}
.overflow--1 {
  background: rgba(0, 128, 0, 0.2);
  /*
    * If I add position relative to any of the child elements, the scroll will be visible. WTF?
    */
}
.overflow--1 button {
  position: relative;
}
.overflow--2 {
  background: rgba(0, 0, 255, 0.2);
}
.overflow button {
  display: inline-block;
  border: 1px solid #ccc;
  min-height: 160px;
  background: #fff;
  padding: 1em;
  width: 200px;
}

如果元素具有相对位置的子级，则滚动条将隐藏在溢出状态下（Google Chrome-Mac OS）

1 个答案: