Introduction to the implementation method of disabling background sliding in the pop-up box on the mobile terminal (with code)

This article brings you an introduction to the implementation method of prohibiting background sliding in the pop-up box on the mobile terminal (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

There are many ways to write the word fennel. It is best to find the most suitable one.

The following method is feasible within one stack

body;html Set overflow:hidden

.overflow-hidden{
    height: 100%;
    overflow: hidden;
}

// 弹出时
$('html, body,.page').addClass('overflow-hidden');

// 隐藏时
$('html, body,.page').removeClass('overflow-hidden');

Problem

When the body content exceeds one stack, the bounce The frame background page will automatically scroll to the top and cannot return to the original position of the pop-up frame

Save scrollTop and then set scrollTo

var top = $(window).scrollTop();
// 弹出时
$("body .page").css({
    "position": "fixed",
    "top": -top,
    "left": 0,    
    "right": 0,    
    "bottom": 0
}),

// 隐藏式
$("body .page").css({
    "position": "static"
});
$("html").css({
    "scroll-behavior": "unset"
});
$(window).scrollTop(top),
$("html").css({
    "scroll-behavior": "smooth"
});

Problem

When the body content exceeds one page, the pop-up background page will automatically scroll to the top and cannot return to the original location of the pop-up box

The page will top and page scroll; the page will flicker

Bind the touchmove event, and then call preventDefault()

function preventDefaultFn(event){
    event.preventDefault();
}

// 弹出时 遮罩层
$('.modal-overlay').on('touchmove', preventDefaultFn);

// 隐藏时 遮罩层
$('.modal-overlay').off('touchmove', preventDefaultFn);

Problem

There is scrolling content in the pop-up box, and the scrolling content cannot be scrolled

Solution

Add a mark to the element that needs to be scrolled in the pop-up box, and then determine whether to execute event.preventDefault();

Add position:absolute(recommended)# to the main element ##

.page {
     /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}
.overflow-hidden{
    overflow: hidden;
}
// 弹出时
$('.page').addClass('overflow-hidden');
// 隐藏时
$('.page').removeClass('overflow-hidden');
<div class="page">
    <!-- 内容在这里... -->
</div>

Advantages

There are no problems mentioned above

It comes with the solution of bugs related to ios fixed

Disadvantages

Need to change the page Structure

css code slightly too

The above is the detailed content of Introduction to the implementation method of disabling background sliding in the pop-up box on the mobile terminal (with code). For more information, please follow other related articles on the PHP Chinese website!