当我们需要在网页中弹出一些提示框或操作窗口时，使用弹窗功能可以很好地解决这个问题。而使用 CSS 弹窗再配合滚动条移动，则能让操作更加便利高效。

// 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
这是一个弹窗
可自由滚动
// JavaScript 代码
$(window).scroll(function() {
$('.modal').css({
'top': $(window).scrollTop() + ($(window).height() / 2),
'left': ($(window).width() - $('.modal').width()) / 2
});
});

在 CSS 样式中，我们定义了一个弹窗模块，设置了其位置、大小、背景颜色、圆角、阴影等样式。水平居中时，可使用 transform 属性中的 translate(-50%, -50%) 即可。

在弹窗 HTML 中，我们需要放置需要展示的内容。由于弹窗高度有限，若内容过长则需使用 overflow-y: auto; 可自由滚动。

最后，引入 JavaScript 代码，使用 scroll 事件监听滚动条的滚动。通过设置弹窗的 top 和 left 属性，实现弹窗随滚动条移动的效果。