Comment obtenir l'effet coulissant désactivant de la page inférieure sous la fenêtre contextuelle dans jQuery

Lors du processus de développement d'un projet, nous rencontrons souvent des pages avec des fenêtres pop-up, notamment sur le terminal mobile. A travers cet article, je partagerai avec vous l'effet de jQuery de désactiver le glissement sur la page inférieure sous la fenêtre pop-up. Les amis qui en ont besoin peuvent s'y référer

Pendant le processus de développement du projet, nous rencontrons souvent des pages avec. les fenêtres pop-up, en particulier sur les téléphones mobiles. 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 de 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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Réponses détaillées à la construction de l'environnement Webpack+Babel+React (tutoriel détaillé)

Utiliser webpack+vue2 pour le projet construction

Interprétation détaillée de la configuration pertinente de webpack babel (tutoriel détaillé)

Rapport de 404 problèmes concernant les fichiers de ressources du projet vue dans webpack (détail tutoriel)

Comment intégrer vux dans vue.js pour réaliser le chargement pull-up et l'actualisation déroulant

Comment utiliser Gulp pour implémenter la modularisation de pages Web statiques ? Comment le faire spécifiquement ?

Utilisez js pour implémenter WeChat pour évoquer Alipay pour recevoir des enveloppes rouges (tutoriel détaillé)

Comment utiliser l'historique pour contrôler le routage dans React- router (tutoriel détaillé)

Comment implémenter le rendu côté serveur à l'aide de vue-ssr

À propos de l'implémentation du mécanisme de répartition entre Vue2. 0 composants parent et enfant (tutoriel détaillé)

Exemple de sélection de case à cocher et de transmission de valeur dans jQuery+SpringMVC_jquery

Comment obtenir la valeur de la valeur de la boîte à sélection multiple dans la publication dans SpringMVC (exemple de code)

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!