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

Question

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

javascriptcssmodal-dialog

3

问题在于，如果您有一个长的模态框，则需要添加一个向下滚动的选项。然而，在模态框本身添加滚动条对用户体验不利，因为人们习惯使用位于屏幕右侧末端的滚动条进行滚动。像 Twitter 和 Product Hunt 这样的网站已经解决了这个问题：

我仍然不知道如何实现它。我一直在网上搜索资料，但不幸的是没有找到任何相关的信息。如果您有任何想法，请告诉我。更新：这是我的当前模态框样式：

.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);
 }

- Michael

展示你的代码？你使用Bootstrap模态框吗？ - Omri Luzon

请至少分享您正在使用的正文/模态内容，并且知道您是否尝试过任何特定的方法但未成功，这将非常有帮助。 - Michael Coker

1

只需不要将模态框固定在视口上，而是将其定位。这样它就会成为一个可滚动的元素。 - Araymer

2

@MikeVayvala 分享你的代码。 “寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、具体问题或错误以及最短的代码，以便在问题本身中重现它。请参阅：如何创建 [mcve]。”- https://stackoverflow.com/help/on-topic - Michael Coker

1

@MichaelCoker 刚刚更新了问题。 - Michael

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Coker · Accepted Answer

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

要做到这一点，我会将您的 .modal 设置为全屏模态，使用 overflow：auto ，然后将模态的内容 absolute ly放置在其中。因此，您正在滚动主要的 .modal 窗口，滚动条位于最右侧，就像主窗口滚动条一样。

.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;
}

<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>