11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je cherche une scrollbar en javacript compatible avec les principaux navigateurs. Il faudrai que le défilement reste fonctionnel même avec le javascript désactivé, et que, par conséquent, la barre de défilement par défaut, remplace celle en javascript.


Où puis-je trouver un tel script?

Merci à vous Smiley cligne
Modifié par MasterPingouin (01 Jun 2007 - 16:40)
Faire en sorte que mes div avec un overflow:auto; ne sois pas trop dénaturées par l'aspect des scrollbars par défaut, et puis de quoi j'me mêle (attention humour inside) Smiley cligne
Modifié par MasterPingouin (01 Jun 2007 - 18:43)
j'avais essayé un jour ce genre de script, je ne sais plus ou, de tout façon il marché pas bien.
Par contre ce que je me souvient, c'est d'être arrivé a la conclusion que ce n'est pas une bonne idée...
En effet l'utilisateur est habitué aux barre de scroll classique et surtout a son comportement qui est d'être fiable et de réagir vite. Ors, une faite en javascript, n'aurat jamais un comportement égal, donc l'utilisateur aura l' impression que c'est pas trés net et un peu buggé. Comme par exemple avec celle faites en flash, même celle qui sont dans les composants, donc normalment fiable on parfois des comportements étranges, par exemple si ton ordi est occupé. Bref je te déconseille, à mon avis tu vas perdre ton temps.
Bonjour

Pour te contredire :

http://www.bouletcorp.com/blog/index.php?date=20070524

Pour faire simple, j'avais pensé que le contenu était une image dans une page html, je n'avais pas vu le chargement du flash Smiley cligne

Sinon, ce genre de script est facile à faire. Il faut :

-Soit avoir une div contenant, dont l'intérieur est en overflow hidden, et la scrollbar fera bouger une div intérieure.
-Soit utiliser scrollTop et les fonctions javascript associées.

Ne pas oublier l'accessibilité avec un graceful degrade!
Modifié par Shinuza (02 Jun 2007 - 15:44)
Shinuza a écrit :
Pour te contredire :

http://www.bouletcorp.com/blog/index.php?date=20070524

Pour faire simple, j'avais pensé que le contenu était une image dans une page html, je n'avais pas vu le chargement du flash Smiley cligne

Sinon, ce genre de script est facile à faire. Il faut :

-Soit avoir une div contenant, dont l'intérieur est en overflow hidden, et la scrollbar fera bouger une div intérieure.
-Soit utiliser scrollTop et les fonctions javascript associées.

Ne pas oublier l'accessibilité avec un graceful degrade!



C'est un peu plus compliqué, j'en ai codé 1 en 2 heures l'autre jour. Au niveau des fonctionnalités on avait :

- Gestion des flèches
- Gestion du scroller (on click sur la barre du milieu et on peu la déplacer)

Il manque dedans :
- Gestion de la molette
- Gestion du fait qu'on peut cliquer sur une zone de la barre d'acenseur et on descend d'un cran.

edit :o
Modifié par Gatsu35 (02 Jun 2007 - 06:38)
matmat a écrit :
j'avais essayé un jour ce genre de script, je ne sais plus ou, de tout façon il marché pas bien.
Par contre ce que je me souvient, c'est d'être arrivé a la conclusion que ce n'est pas une bonne idée...
En effet l'utilisateur est habitué aux barre de scroll classique et surtout a son comportement qui est d'être fiable et de réagir vite. Ors, une faite en javascript, n'aurat jamais un comportement égal, donc l'utilisateur aura l' impression que c'est pas trés net et un peu buggé. Comme par exemple avec celle faites en flash, même celle qui sont dans les composants, donc normalment fiable on parfois des comportements étranges, par exemple si ton ordi est occupé. Bref je te déconseille, à mon avis tu vas perdre ton temps.


Gatsu35 a écrit :

EDIT par Felipe: le membre cité a apparemment édité de lui-même (et il a bien fait Smiley ohwell ), j'édite ta citation également Smiley smile blabla en Flash blabla

Et acccessoirement c'est un peu plus compliqué, j'en ai codé 1 en 2 heures l'autres jours. Au niveau des fonctionnalités on avait :

- Gestion des flèches
- Gestion du scroller (on click sur la barre du milieu et on peu la déplacer)

Il manque dedans :
- Gestion de la molette
- Gestion du fait qu'on peut cliquer sur une zone de la barre d'acenseur et on descend d'un cran.


Smiley nimp
Modifié par Felipe (02 Jun 2007 - 11:58)
Shinuza a écrit :
Pour te contredire :

http://www.bouletcorp.com/blog/index.php?date=20070524

Pour faire simple, j'avais pensé que le contenu était une image dans une page html, je n'avais pas vu le chargement du flash Smiley cligne



Euuh, tu confirme plutot ce qu'il dit là : la scrollbar en flash n'est pas aussi réactive que les scrollbars systèmes. Sur mon Core 2 Duo @ 3Ghz avec 2Go de RAM, cette scrollbar en flash "lag" un peu derrière mon pointeur, alors qu'une scrollbar standard reste toujours parfaitement collée à mon pointeur (alors j'ose pas imaginer ce que ça donne chez les internautes qui se trainent encore un Athlon 64 simple coeur, et il parait que ça existe Smiley cligne )
Alors certes, c'est pas très gênant, mais je suis d'accord avec matmat : il s'en dégage une impression de site qui répond pas bien, un peu buggé. En plus je me sers plus souvent de la molette que des scrollbars, et là ma molette elle défile à deux à l'heure, puisque ça tient pas compte de mes réglages de défilement.

Enfin, je suis certain que si on met ma mère devant un site avec des scrollbars qui n'ont pas exactement la même apparence que celles de windows, elle comprendra pas que ce sont des scrollbars et elle pensera jamais à cliquer dessus Smiley lol
Modifié par BlueScreenJunky (02 Jun 2007 - 11:25)
Smiley hum J'ai montré le site à un ami qui à un athlon 2400 XP + avec 512 mo de ram, il a fait la même remarque que moi sur la scrollbar. Smiley rolleyes
La vu de ton exemple me fait confirmer ma reflexion, ton site serait beaucoup plus réactif et plus rapide si ton image était dans une div normale sans scrollbar flash, (ce serait même mieux sans scrollbar du tout, le navigateur en ayant déja une Smiley langue ). Avec ma machine un peu poussive la scrollbarre a exactement le comportement un peu flou que je décris si-dessus. Franchement si tout ça c'est juste pour changer le style de la scrollbar pour moi ça n'a aucun intéret.

Déjà le overflow auto à un intéret que dans des cas trés particulier, il est en effet bien souvent préferable de laisser le contenu s'écouler et de ne pas destabiliser l'utilisateur en le laissant utliser sa scrollbar, une par page, ça suffit souvent.

Ensuite si il faut vraiment en mettre une, et que la scrollbar de window 98 ou de safari ne te plait pas sur ton site, il ne faut pas oublier que les utilisateur la voit eux 200 fois par jour puisque c'est leur systéme d'exploitation, ce qu'il fait qu'il en oublie la présence.

Enfin un dernier argument edite ton message et imagine que la scrollbar du textarea serait en js tu ne trouverais pas ça bizarre?

En régle générale pour tout ce qui est liste défilante scrollbar, bouton à cocher, il vaut mieux leur laisser les comportement et les styles par défaut auquel les utilisateurs sont habitués. C'est plus simple pour tout le monde.
Shinuza a écrit :
Smiley hum J'ai montré le site à un ami qui à un athlon 2400 XP + avec 512 mo de ram, il a fait la même remarque que moi sur la scrollbar. Smiley rolleyes


Bah ça doit dépendre de la sensibilité de chacun. Perso je suis assez sensible à tout ce qui est rémanence dans les jeux etc., et là cette scrollbar qui lag ça me gêne un peu. Mais j'avoue que c'est léger.
Après je trouve aussi que c'est un peu dommage de recréer une fonctionalité qui existe déjà.

PS : je plaisantais pour la config, j'ose quand même espérer que n'importe quel PS moderne est capable de gérer une scrollbar en javascript ou en flash ^^;
Les goûts et les couleurs, de quoi alimenter de vives discussions sur un topic (^-^) Je comprends que recréer un objet peut paraître stupide, mais, de mon point de vue, ça ne l'ai pas, pour la simple et bonne raison que la scrollbar de certains navigateurs dénatures franchement ma charte graphique. Bref un grand machin gris en pleine page n'est pas du meilleur effet.

Quelqu'un tient-il une solution allant dans se sens?

Merci Smiley cligne
MasterPingouin a écrit :
pour la simple et bonne raison que la scrollbar de certains navigateurs dénatures franchement ma charte graphique.

« bonne » raison ? Smiley confuse

Remplacer une barre système (pas ou peu problématique) par une barre « maison » dans le seul but de maintenir la cohérence d'une charte graphique, de mon point de vue, c'est idiot. L'utilisateur n'a jamais demandé une cohérence absolue de la charte graphique, il a demandé un site aussi utilisable que possible. Le moyen optimal pour y arriver est d'éviter de remplacer les éléments système (ça vaut aussi pour certains contrôles des formulaires) par les siens propres. Enfin bon, chacun fait ses choix, et pour un site personnel pourquoi pas...
MasterPingouin a écrit :
Faire en sorte que mes div avec un overflow:auto; ne sois pas trop dénaturées par l'aspect des scrollbars par défaut

Ah tiens, puisqu'on parlait d'utilisabilité : les divs en overflow: auto avec scrollbar, c'est vraiment pas terrible :
- niveau design (youpi, je fais des zones étriquées de contenu) ;
- niveau accessibilité (problème de navigation au clavier, problème avec une loupe d'écran...) ;
- niveau ergonomique (il faut cliquer dans la div ou au moins la survoler pour que la molette soit active, si on a deux barres de défilement dans la page ça peut être perturbant, etc.).

J'imagine que dans certains cas précis faire une zone de contenu avec barre de défilement interne peut se justifier, mais dans la plupart des cas ça serait plutôt une erreur de conception.

MasterPingouin a écrit :
et puis de quoi j'me mêle (attention humour inside) Smiley cligne

Alsacréations n'étant pas un libre-service technique, il arrive souvent que les demandes d'aides reçoivent pour toute réponse « tu devrais plutôt faire autrement » ou « c'est une erreur de partir sur cette base », ce qui entraine parfois quelques discussions passionnées et de la frustration de la part de ceux qui sont déjà surs de leurs choix et n'attendent qu'une aide technique.

C'est le risque inhérent au fait de poser une question sur un forum. Smiley smile
Très franchement, je ne vois pas où est le problème du moment que le site reste 100% accessible pour les utilisateurs navigant sans javascript et sur des navigateurs relativement ancien. Chacun est libre (avis personnel n'engageant que moi) de penser le web. Je bouscule peut-être tes conceptions du web et passe sûrement pour un hérétique (voir un abruti) aux yeux des vétérans du web, mais je tiens vraiment à cette scrollbar en javascript.

Pour faire court, les moyens m'importent peu, ce qui compte à mes yeux, c'est l'aspect de ma page dans sa globalité.

Je suis jeune laisse moi me tromper Smiley cligne

---

Explique moi juste une petite chose :

En quoi une barre de défilement verte avec les mêmes fonctionnalitées que celle par défaut pourrait perturber l'internaute? Si la symbolique reste la même, personnellement je ne vois pas...

En tout cas je tiens à te remercier pour m'avoir consacré un peu de ton temps Smiley biggrin

Pour cette histoire de
a écrit :
et puis de quoi j'me mêle (attention humour inside)


Ce n'est pas un coup de sang plein de sous-entendus mais seulement une tranche d'humour mal senti de ma part.
Modifié par MasterPingouin (05 Jun 2007 - 10:40)
Dans ce cas, je pense qu'il faut te mettre à javascript sérieusement, parceque comme c'est un script peu utile tu ne vas pas en trouver beaucoup des tout fait, surtout qui soit accessible et performant. Ce qui est bien c'est que c'est un bonne exercice Smiley langue .

Ce que je te conseil c'est de commencer par faire ta boite en html/css en overflow:auto, qui serat remplacée par hidden par ton script, pour être sur que ce soit accessible sans js. Ensuite :
- tu crées avec le DOM une petite boite pour le fond de ta scroll bar
- tu crées une autre pour la scrollbar
- tu leur met les valeurs proportionnel a la taille contenu/taille boite.
- tu recupéres la postition de la souris.
- tu fait un espéce de draganddrop contraint verticalement
- et tu fait bouger le tout en fonction des mouvements de la souris.
- Ensuite tu passe 2 jours a corriger tout les bugs de boites qui sorte de contenu et de scroll bar dépasse les fleches sur ie6 7 et Netscape, Safari et Firefox.

Et enfin tu peux mettre le style que tu veux à ta scrollbar

Toujours partant? (humour inside)
Pourquoi pas? Smiley biggol

Enfin, vu la population qui grouille sur le net, je doûte qu'un tel script n'existe pas. Dommage, je vais tenter ma chance ailleurs Smiley cligne
Pour les scrollbars, tu trouveras ton bonheur avec l'objet slider de la librairie mootools (http://demos.mootools.net/Slider).

Mais peu de chances que tu sois encore en train de chercher 6 mois après. Du moins je ne te le souhaite pas !