Disable bottom page sliding under pop-up windows

This time I will bring you the precautions for prohibiting the sliding of the bottom page under the pop-up window and prohibiting the sliding of the bottom page under the pop-up window. The following is a practical case, let's take a look.

During the project development process, we often encounter pages with pop-up windows, especially on the mobile terminal. In the absence of special requirements, after the pop-up window pops up, the bottom page under the pop-up window can still slide. In order to get a better user experience, it is necessary to prevent the page at the bottom of the pop-up window from sliding when the pop-up window is triggered. When the pop-up window is closed, the page at the bottom of the pop-up window resumes sliding. The specific ideas are as follows:

1. Trigger the pop-up window When, get the position of the scroll bar.

2. Set the

position attribute of the bottom page to fixed.

3. Set the position of the bottom page to the initial position when the pop-up window is triggered.

4. When closing the pop-up window, restore the position attribute of the bottom page.

5.Restore the scroll bar height of the bottom page.

//触发弹窗底部页面禁止滑动
function fixed(){
  var scrollTop = document.body.scrollTop;//设置背景元素的位置
  $('#content').attr('data-top',scrollTop);
  var contentStyle = document.getElementById("content").style;//content是可以滚动的背景元素id名称
  contentStyle.position = 'fixed'; //contentStyle是第二步的变量，设置背景元素的position属性为‘fixed'
  contentStyle.top = "-"+scrollTop+"px";
}
//关闭弹窗底部页面恢复滑动
function fixed_cancel(){
  var contentStyle = document.getElementById("content").style;
  var scrollTop = $('#content').attr('data-top');//设置背景元素的位置
  contentStyle.top = '0px';//恢复背景元素的初始位置
  contentStyle.position ="static";//恢复背景元素的position属性（初始值为absolute，就恢复为absolute，以此类推）
  $(document).scrollTop(scrollTop);//scrollTop,设置滚动条的位置
}

Execute the fixed() method when the pop-up window is triggered; trigger the fixed_cancel() method when closing the pop-up window; you can get a better user experience.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to automatically convert uppercase and lowercase letters when jackson parses a json string

jQuery+localStorage implements timer

The above is the detailed content of Disable bottom page sliding under pop-up windows. For more information, please follow other related articles on the PHP Chinese website!