将 DIV 内容滚动而不是浏览器窗口

Question

将 DIV 内容滚动而不是浏览器窗口

htmlcssposition

3

我创建了一个具有标题、正文和页脚的模态窗口。

我需要在模态窗口的正文中滚动，而不是滚动整个浏览器窗口。

需要注意的是，模态窗口的标题和页脚应该是固定的，例如不能滚动。

我该如何实现这个功能？

div.cover {
  background-color: rgba(0, 0, 0, 0.4); 
  bottom: 0;
  height: 100%;
  left: 0;
  overflow: auto;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 200;  
}

div.modal {
  background-color: white;
  border: solid 1px blue;
  margin: 10% auto;
  max-width: 400px;
  padding: 0;
  width: 80%;
  z-index: 400;
}

div.header, div.body, div.footer {
  padding: 20px 0;
}

div.body {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
}

p {
  float: left;
  padding: 0;
  margin: 0;
}

a {
  float: right;
  display: block;
  padding: 0;
}

.clear:before, .clear:after {
  content: '';
  display: table;
  line-height: 0;
} 

.clear:after {
  clear: both;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis. 
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. 
</p>
<div class="cover">
  <div class="modal">
    <div class="header clear">
      <p>Header</p>
      <a href="#">Close</a>
    </div>
    <div class="body">
      Body<br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. 
    </div>
    <div class="footer">
      Footer
    </div>
  </div>
</div>

- Miguel Moura

2个回答

0

你需要做两件事情。首先，在模态框打开时设置 body 的 overflow：

body{
    overflow: hidden; // inherit when modal is closed.
}

这将确保您的“后面”的内容不会随着滚动而移动。

其次，您需要确保模态框周围的包装器允许溢出滚动。

.modal-content-wrapper{
        width: 100%;
        height: 100%;
        overflow: scroll;
        ....
}

- tolga

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

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

- Dhaval Jardosh · Accepted Answer

请查看更新后的示例。

标题和页脚 - 设置为position:absolute;

.cover {
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  height: 100%;
  left: 0;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 200;
}

.modal {
  background-color: white;
  margin: 10% auto;
  max-width: 400px;
  height: 60vh;
  max-height: 60vh;
  position: relative !important;
}

.scrollView {
  position: relative;
  border: 2px solid red;
  height: calc(60vh - 100px);
  margin: 50px 0;
  top: 50px;
  overflow: scroll;
  z-index: 800;
}

div.header {
  display: flex;
  align-items: center;
  height: 50px;
  max-height: 50px;
  top: 0;
  position: absolute;
  background: lightgreen;
  width: 100%;
  z-index: 900;
  justify-content: space-between;
}

.header div {
  padding: 0 20px;
}

div.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  height: 50px;
  background: orange;
  width: 100%;
}

.body {
  overflow-y: scroll;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor aliquet orci sit amet fringilla. Duis a ligula consequat, ornare elit eu, tincidunt turpis.
</p>
<p>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
</p>
<div class="cover">
  <div class="modal">
    <div class="header">
      <div>Header</div>
      <div><a href="#">Close</a></div>
    </div>
    <div class="scrollView">
      <div class="body">
        Body<br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor. Body
        <br><br>Nulla faucibus ultrices est eu laoreet. Suspendisse accumsan blandit ipsum ultricies congue. Nam eget leo a elit vestibulum tincidunt in elementum nunc. Nunc cursus lacus eu placerat auctor.
        <br><br> LAST LINE OF BODY
      </div>
    </div>
    <div class="footer">
      Footer
    </div>
  </div>
</div>