2009-12-23 4 views
1

est-il possible d'ajouter une image pour notre barre de défilement pour les balises div. je ne veux pas utiliser la barre de défilement normale que nous obtenons [je ne veux pas utiliser les couleurs pour cette barre de défilement]comment ajouter une image pour faire défiler dans les balises

une fois que la hauteur de la div est définie une fois qu'elle dépasse je dois obtenir mon image [image personnalisée pour le défilement]

est-il un moyen que nous pouvons le faire une part plz idée avec moi

+2

Ne pas. S'il vous plaît, s'il vous plaît, s'il vous plaît, s'il vous plaît ne le faites pas. http://web.archive.org/web/20080529040830/http://lists.evolt.org/archive/Week-of-Mon-20030324/138052.html – Quentin

+1

@David: Je suis d'accord avec ça. Google Wave a sa propre barre de défilement que je trouve difficile à utiliser car elle se comporte différemment de la norme. – adrianbanks

+0

@adrianbanks: Je ne suis pas tout à fait d'accord avec vos commentaires sur la barre de défilement de Google Wave. useit.com/alertbox/20050711.html a une bonne analyse des avantages/inconvénients de rouler vos propres barres de défilement. –

Répondre

1

AFAIK, il n'y a pas un moyen de définir une image comme changeurs. Je pense que vous devrez créer quelque chose vous-même. En utilisant un mélange de jQuery slider et overflow:hidden sur un div, vous devriez être capable de le personnaliser plutôt bien. Mais comme David est lié à, il n'est pas très facile à utiliser.

0

Vous pouvez essayer quelque chose comme ça à enlaidir vraiment vos barres de défilement (ne fonctionne pas essayer FF dans IE)

<style> 
body { 
scrollbar-base-color: #EFD700; 
scrollbar-arrow-color: #219B00; 
scrollbar-3dlight-color: #00D8B1; 
scrollbar-highlight-color: #26005B; 
scrollbar-track-color: #03EF00; 
} 
</style> 

mais je doute que ce soit une bonne idée. Je pense qu'il est difficile de rendre ces choses jolies .. sauf si vous utilisez une sorte d'images pour le haut et le bas et les événements qui font défiler la div quand on clique sur

Voici un lien où vous pouvez modifier les styles de barre de défilement précédente.

http://www.iconico.com/CSSScrollbar/

0

En utilisant cette classe javascript ...

function Scroller(elemId) 
{ 
    this.intervalId=null; 
    this.StartScrollLeft=function() { 
     this.intervalId=setInterval("document.getElementById('"+elemId+"').scrollLeft-=5",25); 
    } 
    this.StartScrollRight=function() { 
     this.intervalId=setInterval("document.getElementById('"+elemId+"').scrollLeft+=5",25); 
    } 
    this.StartScrollUp=function() { 
     this.intervalId=setInterval("document.getElementById('"+elemId+"').scrollTop-=5",25); 
    } 
    this.StartScrollDown=function() { 
     this.intervalId=setInterval("document.getElementById('"+elemId+"').scrollTop+=5",25); 
    } 
    this.StopScroll=function() { 
     clearInterval(this.intervalId); 
    } 
} 

déclare ce qui suit pour le balisage ci-dessous ...

var oScroller = new Scroller('container'); 

le balisage HTML ...

<img id="scrollUpControl" src="up.png" onmousedown="oScroller.StartScrollUp()" onmouseup="oScroller.StopScroll()" onmouseleave="oScroller.StopScroll()" /> 
<img id="scrollDownControl" src="down.png" onmousedown="oScroller.StartScrollDown()" onmouseup="oScroller.StopScroll()" onmouseup="oScroller.StopScroll()" /> 
<div id="container" style="height:200px; overflow:hidden">...</div> 
Questions connexes