Einführung in die Implementierungsmethode zum Deaktivieren des Hintergrundgleitens im Popup-Feld auf dem mobilen Endgerät (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in die Implementierungsmethode zum Deaktivieren des Hintergrundslidings im Popup-Fenster (mit Code). Ich hoffe, dass dies für Freunde in Not hilfreich ist Dir helfen.

Es gibt viele Möglichkeiten, das Wort Fenchel zu schreiben, es ist am besten, die passendste zu finden.

Die folgende Methode ist innerhalb eines Stapels möglich

body;html Setting overflow:hidden

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

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

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

Problem

Wenn der Textinhalt einen Stapel überschreitet, wird der Rahmen angezeigt Die Hintergrundseite scrollt automatisch nach oben und kann nicht zur ursprünglichen Position des Popup-Rahmens zurückkehren

scrollTop speichern und dann scrollTo festlegen

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

Wenn der Hauptinhalt eine Seite überschreitet, scrollt die Pop-up-Hintergrundseite automatisch nach oben und kann nicht zur ursprünglichen Position des Pop-ups zurückkehren.

Das Scrollen nach oben und auf der Seite erfolgt auf der Seite; die Seite flackert

Binden Sie das Touchmove-Ereignis und rufen Sie dann PreventDefault() auf

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

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

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

Problem

Es gibt scrollenden Inhalt im Pop -up-Feld, und der Bildlaufinhalt kann nicht gescrollt werden

Lösung

Fügen Sie im Popup-Feld eine Markierung zu den Elementen hinzu, die gescrollt werden müssen, und bestimmen Sie dann, ob das Ereignis ausgeführt werden soll. präventDefault();

Position:absolute (empfohlen) zum Hauptelement hinzufügen

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

Vorteile

Keines der oben genannten Probleme

Es enthält eine Lösung für iOS-bezogene Fehler, die behoben wurden

Nachteile

Änderung der Seitenstruktur erforderlich

Kleiner CSS-Code

Das obige ist der detaillierte Inhalt vonEinführung in die Implementierungsmethode zum Deaktivieren des Hintergrundgleitens im Popup-Feld auf dem mobilen Endgerät (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!