How to achieve the disabling sliding effect of the bottom page under the pop-up window in jQuery

During the project development process, we often encounter pages with pop-up windows, especially on the mobile terminal. Through this article, I will share with you how jQuery implements the effect of disabling sliding on the bottom page under the pop-up window. Friends who need it can refer to it

In the process of project development, we often encounter pages with pop-up windows, especially on mobile phones. end. Without 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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed answers to Webpack Babel React environment construction (detailed tutorial)

Using webpack vue2 to build projects

Detailed interpretation of the relevant configuration of webpack babel (detailed tutorial)

Reporting 404 issues related to the vue project resource file in webpack (detailed tutorial)

How to integrate vux in vue.js to implement pull-up loading and pull-down refresh

How to use Gulp to implement static web page modularization? How to do it specifically?

Use js to implement WeChat to evoke Alipay to receive red envelopes (detailed tutorial)

How to use history to control routing in react-router (detailed tutorial)

How to implement server-side rendering using vue-ssr

About the implementation of the dispatch mechanism between Vue2.0 parent and child components (detailed tutorial)

jQuery Check box selection and value passing example in SpringMVC_jquery

How to get the value of the multi-select box value in post in SpringMVC (code example )

The above is the detailed content of How to achieve the disabling sliding effect of the bottom page under the pop-up window in jQuery. For more information, please follow other related articles on the PHP Chinese website!