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

//触发弹窗底部页面禁止滑动
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,设置滚动条的位置
}

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!