11548 sujets

JavaScript, DOM et API Web HTML5

Faire defiler une div...

Bonjour,

Je ne suis pas doué en javascript. J'avais récuperé il y a longtemps ce script qui permet de faire défiler une page horizontalement jusqu'à une "ancre" définie.

Avec ce même système j'aimerais faire défiler non pas la page mais un bloc(avec un id="xx" à l'interieur d'un autre bloc. Le bloc conteneur aurait bien sûr un overflow: hidden.

Mais dans ce script peut-être un peu vieillot dans son entête je ne sais comment remplacer window par l'id de mon bloc...

Quelqu'un(e) aurait une idée ?


<html>

<head>

<script>
var isNav=false;
var isIE=false;
if(navigator.appName.indexOf("Microsoft")!=-1) isIE=true;
else if(navigator.appName.indexOf("Netscape")!=-1) isNav=true;

function bougeh(y,p) {
//        var destiNation = (0 + y);
//        for(i = 0; i <y; i += p){
//                window.scroll(i, 0)
var total_scroll = y/20;
for(i = 0; i <total_scroll; i += 1){
window.scrollBy(20,0);
}
//        }
}
function bougeb(y,p) {
	var total_scroll = y/20;
	for(i = 0; i <total_scroll; i += 1){
	window.scrollBy(-20,0);
	}
}
</script>

<style>
.conteneur {
	border: 1px solid red;
	padding: 10px;
	width:600px;
}
.defilant {
	width: 3000px;
	height: 300px;
	border: 1px solid black;
}
.defilant .recule {
	margin-left: 1200px;
}
</style>

</head>

<body>
<div class="conteneur">
<div class="defilant">
<a href="javascript:bougeh(1200,20)">avance</a>
<a class="recule" href="javascript:bougeb(1200,20)">recule</a>
</div>
</div>
</body>

</html>


Merci de me mettre sur la piste...

Mikaël
Salut,

Je suis aussi intéressé par une réponse, j'arrive a déplacer l'overflow du body sur la hauteur mais pas sur la largeur, et je n'arrive pas a l'appliquer dans un div !

Merci
Je ne suis pas sûr que la fonction scrollBy fonctionne pour les div, mais tu dois normalement pouvoir te servir des propriétés scrollLeft, scrollTop, scrollWidth et scrollHeight.
Sujet clos
Aller à