Question

我有一个模态的html：

 <div class="modal__container">
    <div class="modal__container-title">
      Title
      <div class="text-lg" @click="closeModal">&times;</div>
  </div>
  <div class="modal__container-content">
      <!-- content -->
  </div>
</div>

使用CSS：

.modal__container {
width: 95%;
max-width: 780px;
max-height: 680px;
overflow-y: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.modal__container-title {
  color: #fff;
  background: #000;
  font-size: 16px;
  padding: 0 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal__container-content {
  padding: 15px;
  border: 5px solid #000;
  border-top: none;
}
}

我正在尝试将滚动条移动到模式内容中，以便在滚动时可以将模式标题保持在顶部，但找不到解决方法。我试图移动溢出-y：自动；放入.modal__container-content，但失败。请帮忙，谢谢。

示例在这里：https://codepen.io/uu9924079/pen/PoPoZNv?editors=1100

Answer 1

一种方法是将以下内容添加到.modal__container-title：

position: sticky;
top: 0;

这不会将滚动条移到内容中，只会将标题固定在可滚动区域的顶部。

滚动时将模式标题保持在顶部

1 个答案: