當(dāng)我們需要在網(wǎng)頁(yè)中彈出一些提示框或操作窗口時(shí)，使用彈窗功能可以很好地解決這個(gè)問(wèn)題。而使用 CSS 彈窗再配合滾動(dòng)條移動(dòng)，則能讓操作更加便利高效。

// CSS 樣式
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background-color: white;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
z-index: 1;
overflow-y: auto;
}
// 彈窗 HTML
這是一個(gè)彈窗
可自由滾動(dòng)
// JavaScript 代碼
$(window).scroll(function() {
$('.modal').css({
'top': $(window).scrollTop() + ($(window).height() / 2),
'left': ($(window).width() - $('.modal').width()) / 2
});
});

在 CSS 樣式中，我們定義了一個(gè)彈窗模塊，設(shè)置了其位置、大小、背景顏色、圓角、陰影等樣式。水平居中時(shí)，可使用 transform 屬性中的 translate(-50%, -50%) 即可。

在彈窗 HTML 中，我們需要放置需要展示的內(nèi)容。由于彈窗高度有限，若內(nèi)容過(guò)長(zhǎng)則需使用 overflow-y: auto; 可自由滾動(dòng)。

最后，引入 JavaScript 代碼，使用 scroll 事件監(jiān)聽(tīng)滾動(dòng)條的滾動(dòng)。通過(guò)設(shè)置彈窗的 top 和 left 屬性，實(shí)現(xiàn)彈窗隨滾動(dòng)條移動(dòng)的效果。