Deaktivieren Sie das Verschieben der unteren Seite unter Popup-Fenstern

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen vorstellen, um das Verschieben der unteren Seite unter dem Popup-Fenster zu verhindern Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

Während des Projektentwicklungsprozesses stoßen wir häufig auf Seiten mit Popup-Fenstern, insbesondere auf dem mobilen Endgerät. Ohne besondere Anforderungen kann die untere Seite unter dem Popup-Fenster nach dem Öffnen des Popup-Fensters immer noch verschoben werden. Um ein besseres Benutzererlebnis zu erzielen, muss verhindert werden, dass die Seite am unteren Rand des Popup-Fensters verschiebt, wenn das Popup-Fenster geschlossen wird Das Popup-Fenster wird wie folgt verschoben:

1. Ermitteln Sie die Position des Popup-Fensters.

2. Setzen Sie das Attribut Position der unteren Seite auf „Fest“.

3. Stellen Sie die Position der unteren Seite auf die Anfangsposition ein, wenn das Popup-Fenster ausgelöst wird.

4. Stellen Sie beim Schließen des Popup-Fensters das Positionsattribut der unteren Seite wieder her.

5. Stellen Sie die Höhe der Bildlaufleiste der unteren Seite wieder her.

//触发弹窗底部页面禁止滑动
function fixed(){
  var scrollTop = document.body.scrollTop;//设置背景元素的位置
  $('#content').attr('data-top',scrollTop);
  var contentStyle = document.getElementById("content").style;//content是可以滚动的背景元素id名称
  contentStyle.position = 'fixed'; //contentStyle是第二步的变量，设置背景元素的position属性为‘fixed'
  contentStyle.top = "-"+scrollTop+"px";
}
//关闭弹窗底部页面恢复滑动
function fixed_cancel(){
  var contentStyle = document.getElementById("content").style;
  var scrollTop = $('#content').attr('data-top');//设置背景元素的位置
  contentStyle.top = '0px';//恢复背景元素的初始位置
  contentStyle.position ="static";//恢复背景元素的position属性（初始值为absolute，就恢复为absolute，以此类推）
  $(document).scrollTop(scrollTop);//scrollTop,设置滚动条的位置
}

Führen Sie die Methode „fixed()“ aus, wenn das Popup-Fenster ausgelöst wird. Lösen Sie die Methode „fixed_cancel()“ aus, wenn das Popup-Fenster geschlossen wird.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

So konvertieren Sie automatisch Groß- und Kleinbuchstaben, wenn Jackson JSON-Strings analysiert

jQuery+localStorage implementiert den Timer

Das obige ist der detaillierte Inhalt vonDeaktivieren Sie das Verschieben der unteren Seite unter Popup-Fenstern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!