Créer une div qui se scroll uniquement à la verticale [Résolu]

designnn 9 Messages postés mercredi 14 avril 2010Date d'inscription 15 avril 2010 Dernière intervention - 14 avril 2010 à 14:41 - Dernière réponse : designnn 9 Messages postés mercredi 14 avril 2010Date d'inscription 15 avril 2010 Dernière intervention
- 15 avril 2010 à 00:27
Salut,

Je suis graphiste et je souhaite créer une div qui bouge normalement en scroll vertical avec les autres div de la page mais qui ne bouge pas en cas de scroll horizontal, contrairement aux autres div qui bougent horizontalement.

(Un peut comme une position:fixed horizontal uniquement, ce qui n'est pas possible en CSS)

Voici l'essai que j'ai réalisé, et ça ne fonctionne pas. Le scroll est OK à la verticale car tous les div bougent, mais le bloc noir continue de bouger en scrollant à l'horizontale alors que je veux qu'il reste immobile.

Voici mon essai (page simplifiée et expliquée) :
http://obsedo.free.fr/test1.html

Il y a une(des) erreur(s) que je n'arrive pas à trouver avec mon petit niveau de graphiste. Je créé un second post ci-dessous pour y mettre le code seul.

Pour info, j'ai essayé de reprendre le code de ghost_of_prog qui avait trouvé une solution pour le scroll uniquement vertical ou horizontal, mais ça ne fonctionne pas chez moi.
(la solution de ghost_of_prog :
http://www.javascriptfr.com/forum/sujet-CSS-POSITION-FIXED-SANS-SCROLL-HORIZONTAL_1323668.aspx

Merci de bien vouloir jeter un œil sur mon javascript pour m'aider à le faire fonctionner ou de me dire si c'est tout faux.

En espérant des réponses. Graphiquement.
Afficher la suite 

12 réponses

Répondre au sujet
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 14 avril 2010 à 18:27
+3
Utile
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)
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de PetoleTeam
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 14 avril 2010 à 19:15
+3
Utile
essaies avec une entête de fichier traditionnelle à savoir
<!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)
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de PetoleTeam
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 14 avril 2010 à 19:59
+3
Utile
document.getElementById("noir").style.left=X;)

l'accolade fermante est en trop...

;O)
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de PetoleTeam
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 14 avril 2010 à 22:22
+3
Utile
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)
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de PetoleTeam
designnn 9 Messages postés mercredi 14 avril 2010Date d'inscription 15 avril 2010 Dernière intervention - 14 avril 2010 à 14:42
0
Utile
<!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>
Commenter la réponse de designnn
designnn 9 Messages postés mercredi 14 avril 2010Date d'inscription 15 avril 2010 Dernière intervention - 14 avril 2010 à 18:54
0
Utile
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.
Commenter la réponse de designnn
designnn 9 Messages postés mercredi 14 avril 2010Date d'inscription 15 avril 2010 Dernière intervention - 14 avril 2010 à 19:48
0
Utile
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.
Commenter la réponse de designnn
designnn 9 Messages postés mercredi 14 avril 2010Date d'inscription 15 avril 2010 Dernière intervention - 14 avril 2010 à 20:31
0
Utile
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).
Commenter la réponse de designnn
designnn 9 Messages postés mercredi 14 avril 2010Date d'inscription 15 avril 2010 Dernière intervention - 14 avril 2010 à 20:32
0
Utile
<!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>
Commenter la réponse de designnn
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 14 avril 2010 à 20:40
0
Utile
mets donc la réponse en acceptée, les visiteurs seront ainsi avertis.
;O)
Commenter la réponse de PetoleTeam
designnn 9 Messages postés mercredi 14 avril 2010Date d'inscription 15 avril 2010 Dernière intervention - 14 avril 2010 à 20:48
0
Utile
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 ?
Commenter la réponse de designnn
designnn 9 Messages postés mercredi 14 avril 2010Date d'inscription 15 avril 2010 Dernière intervention - 15 avril 2010 à 00:27
0
Utile
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.
Commenter la réponse de designnn

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.