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.

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>

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!