css弹窗时禁止滚动 |css div 下边框

/* 使用CSS来禁止页面的滚动 */
body {
overflow: hidden;
}

如上代码所示，大家可以通过设置`body`元素的`overflow`属性为`hidden`来达到禁止页面滚动的效果。当然，这样做虽然有效，但也有可能造成一些问题，比如弹窗外部内容被覆盖住、页面宽度发生变化等。因此，在实现这一功能时，大家还需要注意以下几点：

1、大部分弹窗都是通过增加一个遮罩层来实现，因此，大家需要同时设置遮罩层的样式，避免它出现滚动条。比如：

.mask {
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
overflow: hidden;
}

2、弹窗内部如果包含了滚动条，则需要特别处理。大家可以使用`position`属性的`fixed`值来固定滚动条的位置，从而避免它产生滚动效果。具体如下：

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 60%;
height: 60%;
background-color: #fff;
overflow: auto;
}
.popup::-webkit-scrollbar {
display: none; /* 隐藏滚动条 */
}

除了上述两点之外，大家还需要结合具体的业务场景，采取不同的措施来实现禁止滚动的效果。当然，无论采用什么方法，大家都需要时刻关注用户的实际体验，以便在使用中不断优化。