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.
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>
Nombre de les problèmes ci-dessus
Il est livré avec iOS corrigé des bugs liés résolus
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!