时间戳

首页 > 解决方案 > 滚动时将模态标题保持在顶部

html - 滚动时将模态标题保持在顶部

问题描述

我有一个模态，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;
}
}

我正在尝试将滚动条移动到模态内容中，以便在滚动时可以将模态标题保持在顶部，但找不到这样做的方法。我试图移动 overflow-y: auto; 进入 .modal__container-content 但失败了。请帮忙，谢谢。

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

标签： htmlcss

解决方案

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

position: sticky;
top: 0;

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

推荐阅读