Désactiver le glissement de la page inférieure sous les fenêtres pop-up

Cette fois, je vais vous présenter quelles sont les précautions pour interdire le glissement de la page du bas sous la fenêtre pop-up et interdire le glissement de la page du bas sous la fenêtre pop-up. Voici un cas pratique, jetons un oeil.

Lors du processus de développement du projet, nous rencontrons souvent des pages avec des fenêtres pop-up, notamment sur le terminal mobile. Sans exigences particulières, après l'apparition de la fenêtre contextuelle, la page inférieure sous la fenêtre contextuelle peut toujours glisser. Afin d'obtenir une meilleure expérience utilisateur, il est nécessaire d'empêcher la page en bas de la fenêtre pop-up de glisser lorsque la fenêtre pop-up est déclenchée. Lorsque la fenêtre pop-up est fermée, la page en bas. de la fenêtre pop-up reprend le glissement. Les idées spécifiques sont les suivantes :

1. Déclenchez la fenêtre pop-up Quand, obtenez la position de la barre de défilement.

2. Définissez l'attribut position de la page inférieure sur fixe.

3. Réglez la position de la page inférieure à la position initiale lorsque la fenêtre contextuelle est déclenchée.

4. Lors de la fermeture de la fenêtre pop-up, restaurez l'attribut de position de la page du bas.

5. Restaurez la hauteur de la barre de défilement de la page inférieure.

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

Exécutez la méthodefixed() lorsque la fenêtre pop-up est déclenchée ; déclenchez la méthodefixed_cancel() lorsque la fenêtre pop-up est fermée, vous pouvez obtenir une meilleure expérience utilisateur ;

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Comment convertir automatiquement les lettres majuscules et minuscules lorsque Jackson analyse les chaînes json

jQuery+localStorage implémente la minuterie

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!