弹窗固定定位引起的滚动穿透

weixin_44204580

于 2019-07-10 10:45:55 发布

阅读量712

点赞数

CC 4.0 BY-SA版权

文章标签：滚动穿透

本文链接：https://blog.youkuaiyun.com/weixin_44204580/article/details/95314643

本文探讨了弹窗使用固定定位时遇到的滚动穿透问题，提出了解决方案——通过记录并维护滚动条位置，确保弹窗开启或关闭时页面保持在用户的滚动位置。

弹窗固定定位引起的滚动穿透

如果直接给body添加固定定位，当出现滑动滚动条之后再出现弹窗这种情况时，页面会滚动到顶部，所以我们要记录滚动条的位置，无论是弹窗开启还是关闭都保证页面在滚动的位置

	let scrollTop = 0;
	// 弹窗开启时调用
    function forbidScroll() {
      scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      document.body.style.position = 'fixed';
      document.body.style.top = -scrollTop + 'px';
    }
    // 弹窗关闭时调用
    function allowScroll() {
      document.body.style.position = 'static';
      document.body.scrollTop = scrollTop;
      document.documentElement.scrollTop = scrollTop;
    }

亲测有效~