在使用 CSS 彈出層的過程中，我們可能會遇到彈出層無法滾動的問題，這可能給用戶帶來不便。那么，怎樣才能在彈出層中實現滾動呢？以下是一些解決方法。

1.設置彈出層高度和最大高度

.popup {
height: 400px; /* 設定固定高度，超出則出現滾動條 */
max-height: 90vh; /* 最大高度不超過視口高度的 90% */
overflow-y: auto; /* 超出高度則顯示滾動條 */
}

2.在彈出層后面創建一個全屏遮罩

.popup-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
z-index: 999; /* 要比彈出層的 z-index 大 */
overflow-y: auto; /* 顯示滾動條 */
}

3.禁止背景滾動

body {
height: 100%;
overflow: hidden; /* 隱藏底層滾動條 */
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
height: 400px; /* 設定固定高度，超出則出現滾動條 */
overflow-y: auto; /* 超出高度則顯示滾動條 */
}
.popup-close {
position: absolute;
top: 0;
right: 0;
margin: 10px;
}
.popup-show {
display: block;
}
.popup-hide {
display: none;
}
.popup-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
z-index: 999; /* 要比彈出層的 z-index 大 */
overflow-y: auto; /* 顯示滾動條 */
}

以上就是 CSS 彈出層滾動不了的解決方法。可以根據自己的需求選擇適合的方法來解決問題。希望對大家有所幫助。