Lorsque vous créez une interface utilisateur dans le navigateur, vous pouvez avoir un élément qui peut être défilé, et c'est un besoin courant de connaître le défilement horizontal et vertical dont il dispose actuellement.
Comment peux-tu faire ça?
Une fois que vous avez l'élément, vous pouvez inspecter sonscrollLeftetscrollTopPropriétés.
Le0, 0la position se trouve toujours dans le coin supérieur gauche, donc tout défilement est relatif à cela.
Exemple:
const container = document.querySelector('. container')
container.scrollTop
container.scrollLeft
Ces propriétés sont en lecture / écriture, vous pouvez donc égalementensemblela position de défilement:
const container = document.querySelector('. container')
container.scrollTop = 1000
container.scrollLeft = 1000
Téléchargez mon gratuitManuel du débutant JavaScript
Plus de didacticiels sur le navigateur:
- Quelques astuces utiles disponibles en HTML5
- Comment j'ai fait fonctionner un site Web basé sur un CMS hors ligne
- Le guide complet des applications Web progressives
- L'API Fetch
- Le guide de l'API Push
- L'API Channel Messaging
- Tutoriel pour les techniciens de service
- Le guide de l'API Cache
- Le guide de l'API de notification
- Plongez dans IndexedDB
- L'API Selectors: querySelector et querySelectorAll
- Chargez efficacement JavaScript avec différé et asynchrone
- Le modèle d'objet de document (DOM)
- L'API Web Storage: stockage local et stockage de session
- Découvrez comment fonctionnent les cookies HTTP
- L'API History
- Le format d'image WebP
- XMLHttpRequest (XHR)
- Un tutoriel SVG approfondi
- Que sont les URL de données
- Feuille de route pour apprendre la plate-forme Web
- CORS, partage de ressources inter-origines
- Travailleurs Web
- Le guide requestAnimationFrame ()
- Quel est le Doctype
- Utilisation de la console DevTools et de l'API de la console
- L'API de synthèse vocale
- Comment attendre l'événement DOM ready en JavaScript brut
- Comment ajouter une classe à un élément DOM
- Comment faire une boucle sur des éléments DOM à partir de querySelectorAll
- Comment supprimer une classe d'un élément DOM
- Comment vérifier si un élément DOM a une classe
- Comment modifier la valeur d'un nœud DOM
- Comment ajouter un événement de clic à une liste d'éléments DOM renvoyés par querySelectorAll
- WebRTC, l'API Web en temps réel
- Comment obtenir la position de défilement d'un élément en JavaScript
- Comment remplacer un élément DOM
- Comment accepter uniquement les images dans un champ de fichier d'entrée
- Pourquoi utiliser une version préliminaire d'un navigateur?
- L'objet Blob
- L'objet fichier
- L'objet FileReader
- L'objet FileList
- ArrayBuffer
- ArrayBufferView
- L'objet URL
- Tableaux typés
- L'objet DataView
- L'API BroadcastChannel
- L'API Streams
- L'objet FormData
- L'objet Navigateur
- Comment utiliser l'API de géolocalisation
- Comment utiliser getUserMedia ()
- Comment utiliser l'API Drag and Drop
- Comment travailler avec le défilement sur les pages Web
- Gestion des formulaires en JavaScript
- Événements de clavier
- Événements de souris
- Événements tactiles
- Comment supprimer tous les enfants d'un élément DOM
- Comment créer un attribut HTML à l'aide de JavaScript vanille
- Comment vérifier si une case est cochée à l'aide de JavaScript?
- Comment copier dans le presse-papiers à l'aide de JavaScript
- Comment désactiver un bouton à l'aide de JavaScript
- Comment rendre une page modifiable dans le navigateur
- Comment obtenir des valeurs de chaîne de requête en JavaScript avec URLSearchParams
- Comment supprimer tous les CSS d'une page à la fois
- Comment utiliser insertAdjacentHTML
- Safari, prévenez avant de quitter
- Comment ajouter une image au DOM en utilisant JavaScript
- Comment réinitialiser un formulaire
- Comment utiliser Google Fonts