[CSS/HTML] Ya moyen de changer la taille de la scrollbar ???
Ya moyen de changer la taille de la scrollbar ??? [CSS/HTML] - HTML/CSS - Programmation
Marsh Posté le 25-02-2003 à 09:40:28
c impossible.
(La taille de la scrollbarre est déterminée par le NAV ainsi que par la dimension de la page, de la frame ou encore du div scrollable).
Marsh Posté le 25-02-2003 à 09:48:23
| Hermes le Messager a écrit : c impossible. |
c bien ske jme disais
merci 
---------------
::Mind is a terrible thing to taste::
Marsh Posté le 31-12-2007 à 15:21:39
Pour faire cela il y a une manière...
Faire un scroll en HTML.
une boite DIV avec une dimension qui contient un contenu DIV et une barre de défilement DIV
Ensuite faut du code javascript qui lorsque je clic sur la barre de défilement et fait bouger ma souris, le div content bouge. Grace à cela tu peux mettre la taille et la forme que tu veux à ta bar de scroll. On peut même imaginer un petit boutton enfin tout est possible avec le CSS2 + JavaScript. Je recherche également un moyen pour le faire plus simple mais je pense bien qu'il va falloir que je code ça moi même. Pfffff
PS: merci google qui me fait apparaitre comme premier résultat de recherche un topic qui date de 2003 
Message édité par vodnok le 31-12-2007 à 15:22:14
Marsh Posté le 21-02-2008 à 15:01:18
| dwogsi a écrit : Jolie déterrage. |
C'est surtout la seule ensuite en ce qui concerne l'implémentation, il est tout à fait possible d'avoir une seule fonction js à appeler sur un div
Genre ton code HTML est
<div id='blabla">
</div>
<script>makeMyIdScrollable('blabla')</script>
La fonction js crée le div de scrooling et gère l'overflow et là tu as un truc super clean ![[:aloy]](https://forum-images.hardware.fr/images/perso/aloy.gif "[:aloy]")
Marsh Posté le 21-02-2008 à 16:03:01
Le problème est surtout d'avoir un script blindé qui fonctionne pas seulement en cliquant sur les flêches, mais aussi dans l'ascenseur, en faisant glisser l'ascenseur, au clavier, à la molette
Marsh Posté le 21-02-2008 à 21:13:10
oui évidemment,
Tu peux capter le scroll souris, clavier et le drag d'objet aussi, ce n'est pas compliqué. J'en suis pas encore là dans mon site mais je vais probablement faire un petit script de ce genre d'ici quelques semaines. A moins que quelqu'un en trouve un tout fait même si je préfère le home made.
Marsh Posté le 21-02-2008 à 21:36:24
Simple curiosité : tu leur reproches quoi aux scrollbars des navigateurs pour déployer une artillerie aussi lourde ?
Marsh Posté le 28-02-2008 à 16:44:10
Aucune personnalisation possible via CSS et portable sur tous les browsers.
Au fait, je viens developper le système et ça marche assez bien. Aucun problème de compatibilité entre FF et IE. Je dois encore capter la pression sur les flèches et le scroll souris. Pour ce dernier, ça marche sous FF mais je dois encore faire en sorte que ça soit compatible sur les autres browsers.
C'est multi div, ce qui veut dire que je peux avoir plusieurs boite de défillement sur une même page.
Phylosophie est :
DIV id=box1 + appel fct (box1,200,250,css)
Je dois encore réfléchir à une manière d'éviter de devoir passer la taille en paramètre pour me baser sur la valeur initial du div se trouvant dans le CSS. J'y arrive mais je n'arrive pas encore à effacer la propriété du div initial. Le CSS en paramètre permet de choisir une skin différente dans le cas ou désire plusieurs type de boite différente sur une même page.
Enfin quand mon site sera en ligne, pas tout suite , vous pourrez voir le truc fonctionner. Mais c'est pas mal, je trouve, on peut par exemple remplacer le curseur de défillement par une image, on peut faire varier la taille de la barre et tou ça via 3 class CSS.
Ce ne fonctionne qu'en défilement verticale et si besoin s'en fait sentir, j'adapterai peut être en horizontale.
PS: Protype.js Roxe
Message édité par vodnok le 28-02-2008 à 16:46:20
Marsh Posté le 01-03-2008 à 19:51:38
bien gentil tout ca mais si il y avait plus d explications et aussi des liens montrant les propos ca serait sympa pour les neophites dont je fais partie !
les balises scrollbar-face-color et autres ne fonctionnant que avec IE et Opera. safari, FF et netscape ne les reconnaissant pas !
perso j ai fait ca :
http://ldl-comfashion04.blogspot.com/
fonctionne que sous IE et opera donc...
si quelqu un a une solution pour creer un scrollbar entierement compatible sous tous les navigateurs, je suis interesse !
Marsh Posté le 02-03-2008 à 21:48:27
| vodnok a écrit : PS: Protype.js Roxe |
t as brisé tout l interet du truc en une seule ligne ![[:joce]](https://forum-images.hardware.fr/images/perso/joce.gif "[:joce]")
| LDL a écrit : |
comme tu as du le remarquer la solution existe mais risque d etre difficile a implementer pour un total neophyte
---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Marsh Posté le 03-03-2008 à 22:21:28
| mIRROR a écrit : |
Autant avant je supportais pas voir la moindre ligne de code Js, autant depuis prototype, j'ai l'impression de plus avoir de limite. Avec proto on fait des trucs simples en quelques lignes.
Pour les détails du how to, je dois encore fignoler, le scroll de la souris est pas encore bien gérer (d'ailleurs si vous avez une source pour y arriver) ni le déplacement via les flèches du clavier. Je dois encore ajouter une fct pour pouvoir positionner le scroll à un id bien précis dans la boite scrollée. Un sorte de scrollToId(id). Je n'ai pas non plus trouvé comme effacé une propriété CSS d'une classe CSS mais ce n'est pas problématique. Le code fait 200 lignes mais je dois pouvoir le nettoyer un peu.
| Citation : comme tu as du le remarquer la solution existe mais risque d etre difficile a implementer pour un total neophyte |
Pour le moment si tu as un DIV avec un Width et Heigh fixés, c'est assez facile à intégrer, juste ça à ajouter
Code :
|
Hélas pour le moment obligé de passé le width et le height en paramètres. Je sais les récupérer d'une class CSS mais je n'arrive pas à les annuler ensuite. mais je n'ai pas cherché plus que ça
Ensuite il suffit juste de modifier 2 class CSS pour customiser le bar de défilement et le curseur. images, etc
J'aimerais aussi autoriser le scroll horizontale mais une chose à la fois et hélas j'ai d'autres choses sur le feu
Message édité par vodnok le 03-03-2008 à 22:27:08
Marsh Posté le 03-03-2008 à 22:33:56
a priori sur ton scroll vertical t as pas besoin de modifier la largeur ...donc hop un de moins
menfin ca se code bien sans prototype hein
en css tu bloques la hauteur de ton div et sa hauteur totale est accessible par element.scrollHeight
et hop tu fais sauter la hauteur aussi
---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Marsh Posté le 04-03-2008 à 09:59:43
| mIRROR a écrit : a priori sur ton scroll vertical t as pas besoin de modifier la largeur ...donc hop un de moins |
Quand je dis que le scrool souris marche pas bien, je veux dire par là que j'ai du mal à détecter le scroll souris. Le scroll en tant que tel fonction très bien via le drag de la barre de défilement emulée. Je détecte le scroll souris sous FF mais pas sous IE et Opera.
Je me suis sans doute mal exprimé mais scrollHeight ne fonctionnera pas je pense vu que le but ici est d'emuler un scroll et donc je n'utilise pas de scroll en css via css:overflow. Relis un peu plus haut mes posts et tu comprendras mieux. De plus c'est pas sur ça que je bloque. Je demande juste comme annuler une propriété CSS.
en css tu bloques la hauteur de ton div et sa hauteur totale est accessible par element.scrollHeight
Oui je sais bien ça mais là aussi je me suis sans doute mal exprimé. Ce que je veux faire pour éviter de devoir passer le width et height en paramètre dans la fonction, c'est prendre la width et height dans la class CSS (ça pas de problème) mais je dois ensuite annuler cette propriété de la class CSS de l'objet cible et là je sèche. Mais c'est juste un détail, ca marche très bien en passant via les paramètres et en ne mettant pas de width et height dans la class css de l'objet cible mais ce n'est ça respecte pas la notion de séparation contenu / contenant.
Apparamment tu sais comme faire sauter la hauteur d'une propriété CSS... Tu peux m'expliquer, ça m'interesse.
PS: Evidemment pas besoin du width pour le scroll vertical mais comme je suppose qu'à terme je ferai également le scroll horizontale....
PS2: oui on peut faire du Js sans prototype mais c'est vachement plus long à développer. Prototype est une surcouche qui propose des fonctions
Quand tu as un truc du genre
$('id').getDescendants.each() et que ça fonctionne sur tous les browser, en JS pure c'est possible évidemment mais bien plus hardu
Message édité par vodnok le 04-03-2008 à 10:02:27
Marsh Posté le 04-03-2008 à 10:33:01
ok j ai du mal a comprendre comment marche ton truc
il faut faire gaffe a des trucs comme la non intrusion et la "graceful degradation":
ton bloc de scroll doit conserver son fonctionnement naturel si tu desactives le javascript donc un height et un overflow en css sont obligatoires
pour ton probleme de scroll souris deux liens
ff: http://developer.mozilla.org/en/do [...] eel_events
ie: http://msdn2.microsoft.com/en-us/l [...] S.85).aspx
---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Sujets relatifs:
- [HTML] frames pas bien, quoi alors?
- PHP : fction mail HTML et Images
- [DBGrid] Taille du déplacement horizontal ?
- [Windows NT4] existe-t-il un moyen de savoir si un fichier est vide ?
- [HTML, JS] défilement d'un texte dans un calque / javascript popup
- [HTML] Site web de transfert ftp
- [C++] tronquer un fichier à une certaine taille
- [VBS] Comment transformer des codes HTML en code ASCII?
- Declarer un tableau en CSS
- [HTML/JS] Problème de onmouseover dans un map
Marsh Posté le 25-02-2003 à 09:38:40
Il existe ce genre de truc :
<body style="scrollbar-face-color:#ff0000'>
qui change la couleur des scrollbars (IE5.5+)
yaurait qqchose pour changer aussi la taille (horiz/verti)
ou c impossible ?
---------------
::Mind is a terrible thing to taste::