当前位置:   article > 正文

点击元素弹出弹框后,背景不能滚动,关闭弹窗时,恢复滚动,背景元素位置保持不变_弹窗不滚动并且位置不变

弹窗不滚动并且位置不变

弹窗弹出步骤:第一步:获取滚动条的位置

var scrollTop = document.body.scrollTop;

        第二步:设置背景元素的位置

var contentStyle = document.getElementById("wrapper").style;//wrapper是可以滚动的背景元素id
contentStyle.top = "-"+scrollTop+"px";

        第三步:设置背景元素的position属性为‘fixed’

contentStyle.position = 'fixed'; //contentStyle是第二步的变量

弹出关闭步骤:第一步:恢复背景元素的初始位置

var contentStyle = document.getElementById("wrapper").style;
contentStyle.top = "0px";
   第二步:恢复背景元素的position属性(初始值为absolute,就恢复为absolute,以此类推)

contentStyle .position = 'absolute';

    第三步:设置滚动条的位置

window.scrollTo(0, scrollTop);//scrollTop是弹窗弹出第一步获取的值

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/550084
推荐阅读
相关标签
  

闽ICP备14008679号