Créer une div qui se scroll uniquement à la verticale
Résolu
designnn
Messages postés
9
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
15 avril 2010
-
14 avril 2010 à 14:41
designnn Messages postés 9 Date d'inscription mercredi 14 avril 2010 Statut Membre Dernière intervention 15 avril 2010 - 15 avril 2010 à 00:27
designnn Messages postés 9 Date d'inscription mercredi 14 avril 2010 Statut Membre Dernière intervention 15 avril 2010 - 15 avril 2010 à 00:27
A voir également:
- Scroll js
- Scroll javascript - Meilleures réponses
- Scroll horizontal js - Meilleures réponses
- Poo js - Conseils pratiques -Javascript
- Calendrier js - Conseils pratiques -Javascript
- Racine carré js - Forum Javascript / DHTML
- Innerhtml js ✓ - Forum Javascript / DHTML
- Matrice js - Forum Javascript / DHTML
12 réponses
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
14 avril 2010 à 18:27
14 avril 2010 à 18:27
Bonjour,
2 lignes m'interpellent
document.getElementById("div_noir
").style.top=Y;
et
pas trouvé de DIV avec id = "div_noir" dans ton code
;O)
2 lignes m'interpellent
document.getElementById("div_noir
").style.top=Y;
et
pas trouvé de DIV avec id = "div_noir" dans ton code
;O)
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
14 avril 2010 à 19:15
14 avril 2010 à 19:15
essaies avec une entête de fichier traditionnelle à savoir
sinon il y a
DIV QUI SUIT LE SCROLLING DE LA PAGE
;O)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>à la place de ce qu'il y a...
sinon il y a
DIV QUI SUIT LE SCROLLING DE LA PAGE
;O)
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
14 avril 2010 à 19:59
14 avril 2010 à 19:59
document.getElementById("noir").style.left=X;)
l'accolade fermante est en trop...
;O)
l'accolade fermante est en trop...
;O)
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
14 avril 2010 à 22:22
14 avril 2010 à 22:22
visiblement un problème de flux du document que IE a du mal à gérer.
ajoutes sur le DIV gris
position : absolute;
ou supprimes sur le DIV gris
float: left;
;O)
ajoutes sur le DIV gris
position : absolute;
ou supprimes sur le DIV gris
float: left;
;O)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
designnn
Messages postés
9
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
15 avril 2010
14 avril 2010 à 14:42
14 avril 2010 à 14:42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>bloc fixe horizontalement</title>
<script type="text/javascript">
function move_blocnoir()
{
var Y = document.body.scrollTop;
document.getElementById("div_noir").style.top=Y;
}
</script>
<style type="text/css">
#noir{
width:500px;
height:100px;
background-color: #000;
color: #FFF;
position: absolute;
margin: 100px 0 0 300px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#gris{
height:auto;
width:1000px;
height: 800px;
background-color: #99C;
margin: 250px 0 0 300px;
float: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
</style>
</head>
div noir qui doit bouger en scroll vertical uniquement, mais qui ne doit pas bouger en cas de scroll horizontal de la page, contrairement au bloc gris qui bouge dans les 2 sens
(VIGNETTES DU PORTFOLIO)
div gris qui doit bouger en même temps que le bloc noir en cas de scroll vertical, mais qui bouge seul à l'horizontale en cas de scroll horizontal (le bloc noir devant rester immobile, ce qui ne fonctionne pas pour le moment)
(IMAGES EN GRAND DU PORTFOLIO)
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>bloc fixe horizontalement</title>
<script type="text/javascript">
function move_blocnoir()
{
var Y = document.body.scrollTop;
document.getElementById("div_noir").style.top=Y;
}
</script>
<style type="text/css">
#noir{
width:500px;
height:100px;
background-color: #000;
color: #FFF;
position: absolute;
margin: 100px 0 0 300px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#gris{
height:auto;
width:1000px;
height: 800px;
background-color: #99C;
margin: 250px 0 0 300px;
float: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
</style>
</head>
div noir qui doit bouger en scroll vertical uniquement, mais qui ne doit pas bouger en cas de scroll horizontal de la page, contrairement au bloc gris qui bouge dans les 2 sens
(VIGNETTES DU PORTFOLIO)
div gris qui doit bouger en même temps que le bloc noir en cas de scroll vertical, mais qui bouge seul à l'horizontale en cas de scroll horizontal (le bloc noir devant rester immobile, ce qui ne fonctionne pas pour le moment)
(IMAGES EN GRAND DU PORTFOLIO)
</html>
designnn
Messages postés
9
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
15 avril 2010
14 avril 2010 à 18:54
14 avril 2010 à 18:54
Merci PetoleTeam pour cette réponse.
Correction faite j'ai enlevé les 4 lettres de trop [div_], et ... ça ne fonctionne pas. La div noir glisse toujours en scrollant horizontalement au lieux de rester fixe.
ghost_of_prog était content de sa solution avec quelques coquilles dans ses posts, du coup, difficile de reproduire et déceler là où ça cloche même si la solution est proche.
Correction faite j'ai enlevé les 4 lettres de trop [div_], et ... ça ne fonctionne pas. La div noir glisse toujours en scrollant horizontalement au lieux de rester fixe.
ghost_of_prog était content de sa solution avec quelques coquilles dans ses posts, du coup, difficile de reproduire et déceler là où ça cloche même si la solution est proche.
designnn
Messages postés
9
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
15 avril 2010
14 avril 2010 à 19:48
14 avril 2010 à 19:48
Génial, en changeant l'entête ça fonctionne !
Mais dans le mauvais sens : le bloc noir reste fixe en cas de srcoll vertical alors qu'il devrait le rester en scroll horizontal.
Pour changer le sens (X au lieu d'Y) j'ai donc remplacé :
var Y = document.body.scrollTop;
document.getElementById("noir").style.top=Y;
Par :
var X = document.body.scrollLeft;
document.getElementById("noir").style.left=X;)
Mais ça ne fonction plus dans le sens désiré.
Pour que tu puisses voir l'effet, j'ai laissé pour le moment le lien avec l'effet qui fonctionne, mais dans le mauvais sens (les 2 lignes de code en X sont en note// juste en dessous).
Encore merci pour ton aide très constructive.
Mais dans le mauvais sens : le bloc noir reste fixe en cas de srcoll vertical alors qu'il devrait le rester en scroll horizontal.
Pour changer le sens (X au lieu d'Y) j'ai donc remplacé :
var Y = document.body.scrollTop;
document.getElementById("noir").style.top=Y;
Par :
var X = document.body.scrollLeft;
document.getElementById("noir").style.left=X;)
Mais ça ne fonction plus dans le sens désiré.
Pour que tu puisses voir l'effet, j'ai laissé pour le moment le lien avec l'effet qui fonctionne, mais dans le mauvais sens (les 2 lignes de code en X sont en note// juste en dessous).
Encore merci pour ton aide très constructive.
designnn
Messages postés
9
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
15 avril 2010
14 avril 2010 à 20:31
14 avril 2010 à 20:31
Bingo ça fonctionne comme je le voulais ! Réponses efficaces et pro. Merci beaucoup, je suis ravi! (J'espère que le changement d'entête ne posera pas de problèmes.)
Sur safari : Il y a un tout petit mouvement horizontal du bloc noir de 8 pixels vers la gauche quand je scroll dans les deux sens, mais ça reste fluide, c'est OK.
Sur Firefox et Opera : nickel en scroll vertical, en scroll horizontal le bloc noir tramblotte.
Sur Explorer : je suis sur mac (Power PC), j'utilise donc le site netrenderer (http://www.netrenderer.com) qui fait une capture d'écran sous Explorer 7 et 8, et là, le bloc noir n'apparait pas !
Je poste à nouveau le code propre en intégralité en dessous pour que cela soit utile à ceux qui veulent le même effets (en note // l'effet à la verticale).
Sur safari : Il y a un tout petit mouvement horizontal du bloc noir de 8 pixels vers la gauche quand je scroll dans les deux sens, mais ça reste fluide, c'est OK.
Sur Firefox et Opera : nickel en scroll vertical, en scroll horizontal le bloc noir tramblotte.
Sur Explorer : je suis sur mac (Power PC), j'utilise donc le site netrenderer (http://www.netrenderer.com) qui fait une capture d'écran sous Explorer 7 et 8, et là, le bloc noir n'apparait pas !
Je poste à nouveau le code propre en intégralité en dessous pour que cela soit utile à ceux qui veulent le même effets (en note // l'effet à la verticale).
designnn
Messages postés
9
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
15 avril 2010
14 avril 2010 à 20:32
14 avril 2010 à 20:32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>bloc fixe horizontalement</title>
<script type="text/javascript">
function move_blocnoir()
{
//var Y = document.body.scrollTop;
//document.getElementById("noir").style.top=Y;
var X = document.body.scrollLeft;
document.getElementById("noir").style.left=X;
}
</script>
<style type="text/css">
#noir{
width:500px;
height:100px;
background-color: #000;
color: #FFF;
position: absolute;
margin: 100px 0 0 300px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#gris{
height:auto;
width:1000px;
height: 800px;
background-color: #99C;
margin: 250px 0 0 300px;
float: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
</style>
</head>
div noir qui doit bouger en scroll vertical uniquement, mais qui ne doit pas bouger en cas de scroll horizontal de la page, contrairement au bloc gris qui bouge dans les 2 sens
(VIGNETTES DU PORTFOLIO)
div gris qui doit bouger en même temps que le bloc noir en cas de scroll vertical, mais qui bouge seul à l'horizontale en cas de scroll horizontal (le bloc noir devant rester immobile, ce qui ne fonctionne pas pour le moment)
(IMAGES EN GRAND DU PORTFOLIO)
</html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>bloc fixe horizontalement</title>
<script type="text/javascript">
function move_blocnoir()
{
//var Y = document.body.scrollTop;
//document.getElementById("noir").style.top=Y;
var X = document.body.scrollLeft;
document.getElementById("noir").style.left=X;
}
</script>
<style type="text/css">
#noir{
width:500px;
height:100px;
background-color: #000;
color: #FFF;
position: absolute;
margin: 100px 0 0 300px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#gris{
height:auto;
width:1000px;
height: 800px;
background-color: #99C;
margin: 250px 0 0 300px;
float: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
</style>
</head>
div noir qui doit bouger en scroll vertical uniquement, mais qui ne doit pas bouger en cas de scroll horizontal de la page, contrairement au bloc gris qui bouge dans les 2 sens
(VIGNETTES DU PORTFOLIO)
div gris qui doit bouger en même temps que le bloc noir en cas de scroll vertical, mais qui bouge seul à l'horizontale en cas de scroll horizontal (le bloc noir devant rester immobile, ce qui ne fonctionne pas pour le moment)
(IMAGES EN GRAND DU PORTFOLIO)
</html>
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
14 avril 2010 à 20:40
14 avril 2010 à 20:40
mets donc la réponse en acceptée, les visiteurs seront ainsi avertis.
;O)
;O)
designnn
Messages postés
9
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
15 avril 2010
14 avril 2010 à 20:48
14 avril 2010 à 20:48
Voilou qui est fait. Avec les compliments de la maison.
Par contre comment solutionner l'affichage sur Explorer qui n'affiche pas le bloc noir ?
Par contre comment solutionner l'affichage sur Explorer qui n'affiche pas le bloc noir ?
designnn
Messages postés
9
Date d'inscription
mercredi 14 avril 2010
Statut
Membre
Dernière intervention
15 avril 2010
15 avril 2010 à 00:27
15 avril 2010 à 00:27
Les deux M'sieur !
Maintenant, c'est nickel sur tous les navigateurs. Juste quelques tremblotements sur FF et Opera. En espérant que ce tutoriel soit aussi utile à d'autres.
Merci à toi.
Maintenant, c'est nickel sur tous les navigateurs. Juste quelques tremblotements sur FF et Opera. En espérant que ce tutoriel soit aussi utile à d'autres.
Merci à toi.
