Maison > interface Web > js tutoriel > Désactiver le défilement de la page

Désactiver le défilement de la page

韦小宝
Libérer: 2018-03-14 17:38:56
original
5451 Les gens l'ont consulté

Cet article décrit comment désactiver le défilement sur la page. Si vous ne savez pas comment désactiver le défilement sur la page ou si vous souhaitez désactiver le défilement sur la page, jetons un coup d'œil à cet article. , entrez. Allons droit au but

Explication :

1. le défilement sur la page, qui peut être utilisé en fonction des besoins réels, peut être contrôlé dynamiquement.
2. S'il peut être interdit côté mobile, il peut être interdit sur PC. Mais s'il peut être interdit sur PC, il ne sera peut-être pas interdit côté mobile, je vais donc me concentrer sur le côté mobile 3. Le code montre le zepto que j'utilise (vous ne pourrez peut-être pas l'utiliser, mais vous pouvez certainement le comprendre)

Préface :

Lorsque vous faites du développement mobile, vous aurez inévitablement besoin de désactiver le défilement des pages. Aujourd'hui, je vais résumer la méthode de désactivation du défilement des pages sur mobile. scénario qui peut répondre à vos besoins.

1.

 $(document).on('touchmove', function(e){
   e.preventDefault();
 })
Copier après la connexion

2.

  body{    position: fixed;
    //根据需求添加top,left...
  }
Copier après la connexion

3.

  body{    overflow: hidden;    /*height: 100%;*/
  }
Copier après la connexion

4.Cliquez sur la page, la page s'arrêtera à la position cliquée, puis le glissement et le défilement seront invalides

//根据这个思路,你也可以去应用于元素的禁止滚动$('body').on('tap', function(e){
  $(this).css('top', ('-' + $(window).scrollTop() + 'px'));
  $(this).css('position', 'fixed');
})
Copier après la connexion

5 .Version mobileSauveur, si vous avez une expérience de développement pertinente, vous constaterez que la méthode précédente échoue comme par magie sur le terminal mobile, alors cette méthode peut certainement vous aider

html,html{  overflow: hidden;  height: 100%;}
Copier après la connexion

Conclusion :

Ce qui précède est tout le contenu de cet article. Si vous n'y connaissez pas grand-chose, vous pouvez facilement maîtriser les deux. côtés par vous-même !



Recommandations associées :

JavaScript implémente la désactivation de l'effet de rebond déroulant du navigateur WeChat

Quels sont les moyens de désactiver la mise en cache des pages

Comment utiliser H5 pour ajouter la fonction de désactivation de la mise à l'échelle

jQuery le scanner de code de surveillance interdit la saisie manuelle Méthode de mise en œuvre

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal