28216 sujets

CSS et mise en forme, CSS3

[résolu] Overflow et scroll horizontal via mollette... possible?

Bonjour,

J'aimerais bien essayer de mettre en place une "gallerie" (une loooooongue bande d'images") horizontale.

Après quelques lectures et bidouillages, j'ai réussi avec une div width: auto, overflow nowrap etc, et là c'est le drame: impossible de scroller à la mollette de souris avec FF ou safari (j'ai pas IE... mais je suppose que c'est pareil?)! Smiley bawling

Or ce site http://www.bluevertigo.com.ar/bluevertigo.htm similaire à ce que je souhaite faire, mais avec des frames, réagit superbement bien à la mollette...

Avant de tout recommencer et de faire des cochoncetés à base de frames, y a t'il un joli moyen de rendre actif le scroll horizontal via mollette sur un overflow ou les frames sont-elles ma seule issue?

Merci d'avance pour vos éclaircissements Smiley ravi
Modifié par firfelin (29 Jan 2007 - 17:43)
J'ai désactivé Javascript et j'ai constaté que le défilement ne marchait pas donc j'ai cherché et j'ai fini par trouvé ce "truc" :

 function hscr(e){if (!e) {e =

window.event;}elemento=document.getElementById("cont");
 if (e.wheelDelta <= 0 || e.detail>=0){  

window.scrollBy(120,0)}else  window.scrollBy(-120,0)}
 if (window.addEventListener ) 

{window.addEventListener("DOMMouseScroll", hscr, false);}
 else { document.onmousewheel = hscr; }


çà me paraît pas très clair donc il faut regarder plus attentivement. Ce qui est sûr c'est que tu peux pas faire ce que tu veux en css.
Une petite recherche google et hop je tombe sur un sujet du forum.

zapman a écrit :
La mollette de la souris ne fonctionne pas avec ton design. J'ai eu le même problème et j'ai bricolé le script suivant pour y remédier :
<script type=text/javascript> // By Zapman -  www.rankspirit.com
 
// the following is to restore mousewheel and down/up arrows funtionnalities

function up(){document.getElementById("content").scrollTop=document.getElementById("content").scrollTop - 100;}

function down(){document.getElementById("content").scrollTop=document.getElementById("content").scrollTop + 100;}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;//for IE
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta > 0)up();
	if (delta < 0)down();
	return false;
}

function keyListener(event){
   if(!event)event = window.event;//for IE
   if(event.keyCode==38)up(); //keyCode 38 is up arrow
   if(event.keyCode==40)down(); //keyCode 40 is down arrow
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
window.onkeydown = document.onkeydown = keyListener; 

</script>


Si tu veux essayer, colle-le simplement entre <head> et </head>. Et puisque l'ID de ton bloc de contenu est "corps", tu devras remplacer, dans ce script getElementById("content") par getElementById("corps").

Pour le reste, je trouve aussi que le contraste entre le texte et le fond est toujours insuffisant.

Modifié par CNeo (03 Jan 2007 - 21:03)
firfelin a écrit :

y a t'il un joli moyen de rendre actif le scroll horizontal via mollette sur un overflow ou les frames sont-elles ma seule issue?


Y compris dans le cas des frames la molette ne permet nativement que le scroll vertical.


Donc tu devrais aller dans le salon javascript pour voir à trouver une solution, puis dans le salon accessibilité pour vérifier que ce n'est pas une usine à gaz à oublier (de fait moi je n'en sais rien)
Un grand merci pour vos réponses Smiley biggrin

Je vais voir du coté du javascript, et j'espère pouvoir bientôt revenir vous montrer le résultat Smiley rolleyes
CNeo a écrit :
J'ai désactivé Javascript et j'ai constaté que le défilement ne marchait pas donc j'ai cherché et j'ai fini par trouvé ce "truc" :

 function hscr(e){if (!e) {e =

window.event;}elemento=document.getElementById("cont");
 if (e.wheelDelta <= 0 || e.detail>=0){  

window.scrollBy(120,0)}else  window.scrollBy(-120,0)}
 if (window.addEventListener ) 

{window.addEventListener("DOMMouseScroll", hscr, false);}
 else { document.onmousewheel = hscr; }


çà me paraît pas très clair donc il faut regarder plus attentivement. Ce qui est sûr c'est que tu peux pas faire ce que tu veux en css.


Plus je cherche et plus cette solution me plait par rapport à ce que je veux faire, malgré les frames... Smiley confused
Peux-tu me dire où tu as trouvé ce bout de script... Je n'arrive pas à mettre la main dessus, et je ne vois pas où le placer pour que cela fonctionne.

Encore une fois merci
Prend plutôt le code de Zapman que j'ai posté ... et pas besoin de frames çà s'applique à tous les éléments. Smiley cligne
Modifié par CNeo (04 Jan 2007 - 17:53)
Je sais bien que les frames ont tout un tas de sales défauts, mais il me semble que pour ce cas-ci elles se posent comme une solution nettement plus simple à mettre en oeuvre.

J'aime bcp le fait que la bande d'image scrollable soit collée au bas de la fenêtre quoi qu'il arrive, avec une partie "entête" fixe en haut avec un logo et deux-trois infos minimales. A prori. cela me semble plus simple d'utiliser un frameset en deux parties que de me casser la tête pour bloquer la bande au bas de l'écran et fixer le haut –même en cas de scroll– en CSS. Non? Smiley confused
Sujet clos
Aller à