Comment faire défiler le contenu d'une div avec jQuery (ou en pur JS) ?

Description

Ce script simple fournit une solution pour naviguer vers un emplacement spécifique à l'intérieur d'une div qui a été stylisée avec l'attribut CSS overflow, ce qui signifie que son contenu dépasse la zone visible et nécessite une barre de défilement pour être parcouru.

Si vous disposez d'un div avec débordement, c'est à dire que son contenu dépasse la zone visible et nécessite l'utilisation d'une barre de défilement, il est parfois important de pouvoir diriger l'utilisateur vers une zone précise de ce div. Ce script vous permet de réaliser cette action en utilisant jQuery (ou en utilisant la solution en pur JavaScript proposée) pour créer une expérience utilisateur fluide et intuitive. Grâce à ce script, vous pouvez contrôler le défilement de la div pour diriger l'utilisateur vers un emplacement précis du contenu, améliorant ainsi la navigation et la convivialité de votre site web.

function scroller(parent, enfant, decallageY = 0){

	

	//parent et enfant peuvent être : .classe ou #id

	//decallageY : ce paramètre est pratique pour faire descendre la div enfante un peu plus bas que 0

	

	let deja_scroll = $(parent).scrollTop();

	let la_ou_est_la_div = $(parent + " " + enfant).offset().top;



	$(parent).animate({scrollTop:(la_ou_est_la_div + deja_scroll - decallageY)});

}

function scroller(parent, enfant, decallageY = 0){

	

	//parent et enfant peuvent être : .classe ou #id

	//decallageY : ce paramètre est pratique pour faire descendre la div enfante un peu plus bas que 0

	

	let deja_scroll = document.querySelector(parent).scrollTop;

	let la_ou_est_la_div = document.querySelector(parent + " " + enfant).getBoundingClientRect().y;



	document.querySelector(parent).scrollTop = (la_ou_est_la_div + deja_scroll - decallageY);

}

//simplement appeler la fonction :

scroller("#div_parente", ".div_enfante", 53)

J'espère que ce script gratuit vous sera utile dans vos projets.
Si vous souhaitez soutenir mon travail, un simple clic sur le bouton "Donner remercier" ci-dessous ou une note serait grandement apprécié. Merci pour votre générosité !

Votre réussite en ligne commence ici

Vous cherchez à pousser encore plus loin vos idées ou à les concrétiser avec un site internet sur mesure ? Je suis là pour vous aider ! Mon expérience en développement web est à votre disposition.

Que ce soit la création de votre site web pro ou l'apport de fonctionnalités avancées à votre projet, contactez-moi pour en discuter et avoir un devis gratuit personnalisé.

Mon objectif est de vous offrir des solutions sur mesure qui répondent à vos besoins, et votre vision associée à mon expertise donnera vie à votre projet web parfait. Contactez-moi aujourd'hui, je réponds en général en moins d'une heure :

Comment faire défiler le contenu d'une div avec jQuery (ou en pur JS) ?

Description

Vous recherchez un script précis ?

Commentaires

Ajouter un commentaire