I wrote an article before to solve the problem that when the bullet box is displayed, the body is not allowed to slide. The ideas are roughly as follows:
When the pop-up box is displayed, set html and body overflow: hidden , and prevent the default behavior of the browser;
When the pop-up box is hidden, set html and body overflow:auto , and use the default browser behavior.
However, this method cannot slide when the content in the pop-up box also needs to be swiped, because the default sliding behavior of the browser has been blocked.
The solution to this requirement was:
1. When the page slides, get the scrollTop of the outer box, set the scroll box position:fixed when the pop-up box is displayed , and top is the current scrollTop of the outer box
2. When the pop-up box is canceled, the scroll box position is restored: relative;top:0; , the outer box is assigned scrollTop as the original scrollTop
This not only prevents the scrolling of the main content, but also does not affect the scrolling of the content of the bullet box.
If there are any inaccuracies in the expression, please correct me, welcome to add, thank you for reading.