Comment désactiver le défilement sur une page Web avec JavaScript
Désactiver le défilement sur une page Web
Le défilement sur les pages Web peut être facilement désactivé en utilisant JavaScript de diverses manières, mais dans cet article, nous ne verrons que deux façons de le désactiver qui sont répertoriées ci-dessous:
- Méthode 1: En remplaçant la fenêtre.fonction onscroll
- Méthode 2: En réglant la hauteur du corps à 100% et débordez-vous sur
Chacune de ces méthodes est expliquée ci-dessous avec des exemples pour une meilleure démonstration et votre compréhension.
En remplaçant la fenêtre.fonction onscroll
L'événement fenêtre.onscroll est licencié lorsque la fenêtre a été défilée, la remplacement et la définition de la fonction sur une valeur fixe désactiveront l'effet de défilement de votre page Web.
Vous pouvez trouver la position actuelle de défilement du haut à fenêtre.Pageyoffset et document.document de document.rallonge, les deux qui renverront la valeur actuelle de Y défilement. Ces deux sont utilisés ensemble à l'aide de l'opérateur logique «||» Comme l'un d'eux pourrait revenir 0 sur certains navigateurs.
Maintenant, afin de trouver la valeur de X défilement on peut utiliser fenêtre.pagexset et le document.document de document.faire défiler qui sont utilisés de la même manière que Y Scroll, en utilisant ou opérateur et ils renvoient la valeur de x défilement de la page Web.
Maintenant, après cela, nous allons utiliser fenêtre.ScrolltO () avec les deux valeurs ci-dessus pour définir la position de défilement de votre page Web à cette valeur. Vous pouvez activer le défilement en remplacement de la fenêtre.Fonction Onscroll pour vider une fonction vierge.
Vous trouverez ci-dessous le code fourni pour désactiver le défilement de la page Web à l'aide de cette méthode:
HTML:
Bienvenue sur notre site
Cliquez sur les boutons ci-dessous pour activer ou désactiver le défilement.
Javascript:
functiondisable ()// pour obtenir la position de défilement de la page Web actuelle
Topscroll = fenêtre.Pageyoffset || document.document de document.ScrollTop;
LeftScroll = fenêtre.Pagexoffset || document.document de document.faire défiler,
// Si le défilement se produit, définissez-le sur la valeur précédente
fenêtre.onScroll = function ()
fenêtre.Scrollto (LeftScroll, Topscroll);
;
fonctionnable ()
fenêtre.onScroll = function () ;
Sortir:
En réglant la hauteur du corps à 100% et en débordant sur Hidden
Dans cette méthode, nous utilisons CSS pour désactiver le défilement sur les pages Web. Dans la classe CSS, nous avons réglé la hauteur à 100%, puis nous définissons la propriété Overflow sur Hidden qui désactive la barre de défilement de la page Web.
La méthode document.corps.liste de classe.ajouter («className») est utilisé pour ajouter le nom de classe à l'élément corporel et donc désactiver le défilement. Pour activer le défilement vers l'arrière, la classe est supprimée de la méthode en utilisant document.corps.liste de classe.supprimer («ClassName»).
HTML:
Bienvenue sur notre site
Cliquez sur les boutons ci-dessous pour activer ou désactiver le défilement.
Javascript:
Sortir:
Conclusion
JavaScript est utilisé à diverses fins tels que la création de boîtes d'entrée, de barres de navigation, sur les actions des événements de clic, etc. Grâce à JavaScript, nous pouvons également activer et désactiver l'action de divers composants sur notre page Web. Dans cet article, nous avons discuté de la façon de désactiver le défilement sur une page Web avec JavaScript et discuté de deux méthodes différentes ainsi que des exemples et du code pour une meilleure compréhension de la vôtre. Ces deux méthodes sont facilement utilisées et peuvent aider les utilisateurs à désactiver facilement la barre de défilement.