Introduction à la méthode d'implémentation de désactivation du glissement d'arrière-plan dans la boîte pop-up du terminal mobile (avec code)

Ce que cet article vous apporte est une introduction à la méthode d'implémentation de désactivation du glissement en arrière-plan dans la boîte contextuelle du terminal mobile (avec code). Il a une certaine valeur de référence. j'espère que cela vous sera utile.

Il existe de nombreuses façons d’écrire le mot fenouil, il est préférable de trouver celle qui convient le mieux.

La méthode suivante est réalisable sur une seule page

body;html Setting overflow:hidden

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

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

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

Problème

Lorsque le contenu du corps dépasse une page, la pop -la page d'arrière-plan défilera automatiquement vers le haut et ne pourra pas revenir à l'emplacement d'origine de la fenêtre contextuelle

Enregistrez scrollTop, puis définissez 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"
});

Problème

Lorsque le contenu du corps dépasse une page, la page d'arrière-plan contextuelle défilera automatiquement vers le haut et ne pourra pas revenir à l'emplacement d'origine de la boîte contextuelle

La page passera en haut et le défilement de la page ; la page clignotera. Situation

Lier l'événement touchmove, puis appeler PreventDefault()

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

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

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

Problème

Il y a un défilement contenu dans la boîte contextuelle, faire défiler le contenu Il est également impossible de faire défiler

Solution

Ajouter une marque à l'élément qui doit défiler dans la boîte contextuelle, puis déterminer s'il faut exécuter event.preventDefault();

Ajouter une position à l'élément principal :absolute(recommandé)

.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>

Avantages

Nombre de les problèmes ci-dessus

Il est livré avec iOS corrigé des bugs liés résolus

Inconvénients

La structure de la page doit être modifiée

Il y a trop de codes CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!