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)-tutoriel CSS-php.cn

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)

不言

Libérer： 2018-10-27 14:45:12

avant

2799 Les gens l'ont consulté

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');

Copier après la connexion

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"
});

Copier après la connexion

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);

Copier après la connexion

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>

Copier après la connexion