解决滑动遮罩层,遮罩层下面内容滚动的问题

示例(vue业务场景,配合mint-ui)




讲解

主要利用 position: fixed;,改变其position的值及其body的top值,来固定底层

  • 当点击按钮,遮罩层出现时,获取当前的滚动高度
  • 给要禁止滑动的底层(示例中的wrap)添加fix类名(即 position: fixed;)
  • 设置body的top值为当前滑动高度(固定遮罩层下的内容,禁止滑动)
  • 当遮罩层消失,删除fix类名,还原原来的滚动高度

你可能感兴趣的:(解决滑动遮罩层,遮罩层下面内容滚动的问题)