如何使用主窗口滚动条滚动模态？

Question

问题是如果你有一个长模态，那么你需要添加一个选项来向下滚动。

但是，向模态本身添加滚动条对于UX来说是不利的，因为人们直观地使用屏幕右端的滚动条滚动。

有几个网站已经解决了这个问题，比如推特和产品搜寻：

我仍然无法理解如何实施它。我一直在网上搜索一些资料，但遗憾的是找不到任何材料。

如果您对如何完成有所了解，请告诉我。

更新

以下是我当前模式的样式：

.modal {
    box-shadow:0 12px 30px rgba(0,0,0,0.3);
    z-index:103;
    border-radius:5px;
    text-align:center;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 60px;
    position:fixed;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 100px);
 }

Answer 1

twitter上的滚动条不是主窗口滚动条 - 它只是一个全屏模式对话框中的滚动条，然后它们将模态对话框的内容定位在中心。因此，当您滚动模态时，滚动条位于最右侧，就像主窗口滚动条一样。

为此，我只需使用.modal制作overflow: auto全屏模式，然后absolute将模态内容放在其中。因此，您可以滚动主.modal窗口，滚动条位于最右侧，就像主窗口滚动条一样。

＆＃13;

＆＃13;

.modal {
  z-index: 103;

  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.modalContent {
  position: absolute;
  top: 60px;
  left: 50%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 5px;
  margin-bottom: 60px;
}

＆＃13;

<div class="modal">
  <div class="modalContent">
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;