前提问题:弹窗中内容进行滚动时,设置下方按钮不允许滚动
解决过程:使用粘性布局,position:sticky,也称粘性定位。
1.粘性定位的元素依赖于用户的滚动,在相对定位(relative)与固定定位(fixed)之间进行切换,基于位偏移的值进行偏移。
2.该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。
3.元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于屏幕范围(viewport)视口来计算元素的偏移量
4.当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。
解决结果:
.explame{
position: sticky;?
left:0;
top: 20px;
}
设置了top:20px,当sticky元素到达距离相对定位的元素顶部20px的位置时固定,不再向上移动
.explame{
position: sticky;?
bottom:0px;
}
设置了bottom:0px,当sticky元素到达距离相对定位的元素底部0px的位置时固定,不再向下移动,可以理解为固定在底部,不参与滚动