html - 溢出 : scroll; only the y-axis whilst keeping x-axis visible

Question

问题案例

我正在尝试创建一个滚动的、固定高度的列表，每个列表项都有弹出按钮。

我使用了 overflow-y: scroll; 以便它可以在 y 轴上滚动。

然而，当我也尝试使用 overflow-x: visible(为了显示溢出的弹出窗口)时，它似乎被忽略了

代码

示例 1 - 列表可以滚动，但弹出按钮被剪裁

如您所见，弹出按钮(粉红色)被剪裁

.list {
  width: 72px;
  height: 132px;
  overflow-x: visible;
  overflow-y: scroll;
  background: lightgray;
}

.list li {
  position: relative;
  margin-bottom: 6px;
}

.flyout {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 64px;
  width: 128px;
  background: pink;
}

<ul class="list">
  <li>
    Item 1
    <div class="flyout">Item 1 Flyout</div>
  </li>
  <li>
    Item 2
    <div class="flyout">Item 2 Flyout</div>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

示例 2 - 列表无法滚动，弹出按钮显示正常

删除 overflow-y: scroll 可以很好地显示弹出窗口，但正如预期的那样，列表无法再沿高度滚动。

.list {
  width: 72px;
  height: 132px;
  overflow-x: visible;
  background: lightgray;
}

.list li {
  position: relative;
  margin-bottom: 6px;
}

.flyout {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 64px;
  width: 128px;
  background: pink;
}

<ul class="list">
  <li>
    Item 1
    <div class="flyout">Item 1 Flyout</div>
  </li>
  <li>
    Item 2
    <div class="flyout">Item 2 Flyout</div>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

可能的解决方案

我当然可以让我的 .list 有足够的宽度，这样弹出框就不会溢出它。

我想避免这种情况，因为列表将放置在绘图 Canvas 的顶部，因此它会阻止通过鼠标在 Canvas 上绘画。

使用 pointer-events: none 以免阻塞绘画在这种情况下不起作用，因为指针事件是检测第一个列表的滚动事件所必需的地方。

Answer 1

您需要删除 position: relative。这样绝对定位的弹出框就不会受到overflow的限制了。

但是，它们不会正确滚动。您将需要使用 JS 触发重新布局。

// Force relayout
var li = document.querySelector('li:last-child');
setInterval(function() {
  var parent = li.parentNode;
  var next = li.nextSibling;
  parent.removeChild(li);
  parent.insertBefore(li, next);
}, 60);

.container {
  position: relative;
  overflow: hidden;
  margin: 1em 0;
}
.list {
  width: 72px;
  height: 132px;
  overflow-y: scroll;
  background: lightgray;
  margin: 0;
}
.list li {
  margin-bottom: 6px;
}
.flyout {
  display: inline-block;
  position: absolute;
  width: 128px;
  background: pink;
}

<div class="container">
  <ul class="list">
    <li>
      Item 1
      <div class="flyout">Item 1 Flyout</div>
    </li>
    <li>
      Item 2
      <div class="flyout">Item 2 Flyout</div>
    </li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
  </ul>
</div>