javascript - 模态内可扩展文本的 CSS 问题

Question

我有一个模态窗口，其中包含几个可展开/可折叠的问题。我为 MINIMUM JS 努力了。我有两个问题:

1. 即使我使用 overflow:scroll，文本也不会停留在视口(viewport)内。

2. 即使使用 :checked + body{overflow:hidden !important}，我也无法停止模态窗口后面的页面滚动

我已经阅读了几个 stackoverflow 案例并在网上搜索了替代解决方案。你能帮忙吗？

这是我的代码。

var coll = document.getElementsByClassName("qa");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("xactive");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
} 
});
}

/*Main*/
html, body, div, span, p, label, footer, header, section, button, input, textarea{
margin:0;
padding:0;
border:0;
font:inherit;
vertical-align:top;
user-select:text;
-webkit-user-select:text;
letter-spacing:0.01em}

button, input{
display:inline-block;
-webkit-appearance:none;
outline:none;
color:inherit;
overflow:visible;
background-color:transparent;
box-shadow:none;
border-radius:0}

button{cursor:pointer}

/*Button*/
.btn2{display:inline-block;
text-align:center;
line-height:1.17648;
white-space:nowrap;
font-size:19px;
font-weight:400;
color:#06c;
background:none;
max-width:100%;
min-width:26px;
padding-left:22px;
padding-right:22px;
padding-top:12px;
padding-bottom:12px;
border-radius:22px;
border:1px solid #06c;
text-overflow:ellipsis;
cursor:pointer;
vertical-align:middle;
position:relative;
z-index:1;
text-decoration:none;}

.btn2:hover{
background:#06c;
color:#fff}


/*Modal*/
.modal{opacity:0;
visibility:hidden;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
text-align:left;
background:#f2f2f2;
transition:opacity .1s ease;
z-index:7;
display:flex;
flex-direction:column;
height:100vh;
overflow-y:auto}

.modal__bg{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
cursor:pointer}

.modal-state{display:none}

.modal-state:checked+.modal{
opacity:1;
visibility:visible}

.modal-state:checked+.modal .modal__inner{top:0}

.modal__inner{
transition:top .1s ease;
position:absolute;
right:0;
bottom:0;
left:0;
height:max-content;
max-width:700px;
margin:auto;
padding:1em 1em;
border-radius:5px}

.modal__close{
position:absolute;
right:1.1em;
top:-.3em;
width:1.1em;
height:1.1em;
cursor:pointer;z-index:1}

.modal__close:after,.modal__close:before{
content:'';
position:absolute;
width:2px;
height:1.5em;
background:#999;
display:block;
transform:rotate(45deg);
left:50%;
margin:-3px 0 0 -1px;top:0}

.modal__close:hover:after,.modal__close:hover:before{background:#000}

.modal__close:before{transform:rotate(-45deg)}

/*Text*/
.qa{
color:#000;
font-weight:600;
font-size:25px;
cursor:pointer;
padding-top:13px;
padding-bottom:13px;
width:100%;
border:none;
text-align:left;
outline:none;
background:none}

.qa:hover{color:#06c}

.qa:after{
content:'+';
color:#000;
float:right}

.xactive:after{content:'×'}

.qacontent{
font-size:25px;
padding-bottom:0;
max-height:0;
overflow:hidden;
transition:max-height 0.1s ease-out;
border-bottom:1px solid rgba(0,0,5,0.1)}

.qacontent p{
margin:0;
padding:0}

.modal:checked + body{overflow: hidden !important}

<section>
<div>
<label class="btn2" for="modal-authorinterview">Author Interview</label>
</div>
</section>

<input class="modal-state" id="modal-authorinterview" type="checkbox" /><div class="modal"><label class="modal__bg" for="modal-authorinterview"></label><div class="modal__inner"><label class="modal__close" for="modal-authorinterview"></label>

<button class="qa">Title</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

<button class="qa">Title2</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

<button class="qa">Title3</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

<button class="qa">Title4</button>
<div class="qacontent"><p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
</div>

</div></div>

Answer 1

只需从 .modal__inner 中删除 position:absolute。不需要它，因为您已经将 position:fixed 设置为其父级。将其更改为 position:relative 以保持相同的绘制顺序。

对于滚动问题，只需添加

html {
  overflow:hidden
}

body {
  max-height:100vh;
  overflow:auto;
}

完整代码:

var coll = document.getElementsByClassName("qa");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("xactive");
    var content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

/*Main*/

html,
body,
div,
span,
p,
label,
footer,
header,
section,
button,
input,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: top;
  user-select: text;
  -webkit-user-select: text;
  letter-spacing: 0.01em
}

button,
input {
  display: inline-block;
  -webkit-appearance: none;
  outline: none;
  color: inherit;
  overflow: visible;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0
}

button {
  cursor: pointer
}


/*Button*/

.btn2 {
  display: inline-block;
  text-align: center;
  line-height: 1.17648;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 400;
  color: #06c;
  background: none;
  max-width: 100%;
  min-width: 26px;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-radius: 22px;
  border: 1px solid #06c;
  text-overflow: ellipsis;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.btn2:hover {
  background: #06c;
  color: #fff
}


/*Modal*/

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: #f2f2f2;
  transition: opacity .1s ease;
  z-index: 7;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer
}

.modal-state {
  display: none
}

.modal-state:checked+.modal {
  opacity: 1;
  visibility: visible
}

.modal-state:checked+.modal .modal__inner {
  top: 0
}

.modal__inner {
  transition: top .1s ease;
  height: max-content;
  position:relative;
  max-width: 700px;
  margin: auto;
  padding: 1em 1em;
  border-radius: 5px
}

.modal__close {
  position: absolute;
  right: 1.1em;
  top: -.3em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
  z-index: 1
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #999;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #000
}

.modal__close:before {
  transform: rotate(-45deg)
}


/*Text*/

.qa {
  color: #000;
  font-weight: 600;
  font-size: 25px;
  cursor: pointer;
  padding-top: 13px;
  padding-bottom: 13px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  background: none
}

.qa:hover {
  color: #06c
}

.qa:after {
  content: '+';
  color: #000;
  float: right
}

.xactive:after {
  content: '×'
}

.qacontent {
  font-size: 25px;
  padding-bottom: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  border-bottom: 1px solid rgba(0, 0, 5, 0.1)
}

.qacontent p {
  margin: 0;
  padding: 0
}

html {
  overflow:hidden
}

body {
  max-height:100vh;
  overflow:auto;
}

<section>
  <div>
    <label class="btn2" for="modal-authorinterview">Author Interview</label>
  </div>
</section>

<input class="modal-state" id="modal-authorinterview" type="checkbox" />
<div class="modal"><label class="modal__bg" for="modal-authorinterview"></label>
  <div class="modal__inner"><label class="modal__close" for="modal-authorinterview"></label>

    <button class="qa">Title</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title2</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title3</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

    <button class="qa">Title4</button>
    <div class="qacontent">
      <p>BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA .<br><br></p>
    </div>

  </div>
</div>

<p style="font-size:45px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lorem tortor, luctus quis pulvinar sit amet, tempor ac eros. Nam neque ex, gravida sit amet consequat ut, ullamcorper accumsan magna. In vulputate, lacus id dapibus finibus, magna nibh fringilla nisi, in tincidunt massa metus ut augue. Sed nisi nunc, faucibus varius massa eu, ornare cursus nibh. Suspendisse mauris erat, faucibus placerat volutpat et, commodo sed libero. Integer risus risus, pellentesque ac gravida ut, facilisis et ipsum. Morbi consectetur tincidunt eros, viverra consequat odio imperdiet in. Maecenas pellentesque, dui id placerat feugiat, turpis risus pellentesque lectus, sed congue massa orci in ex. Pellentesque volutpat eu lorem vel ultrices. Mauris ornare quis mauris in elementum. Proin dignissim est quam, tempor lacinia libero pretium nec. Fusce quis venenatis magna. Phasellus vitae volutpat sapien. Duis finibus, augue in sollicitudin molestie, turpis quam efficitur magna, sed dapibus dolor est nec orci. Proin mollis tellus eget risus malesuada, a consequat nunc dapibus. Donec quis nisl purus.</p>