L'objectif de cet XBL est de permettre l'accès aux scrollbars d'un élément avec un comportement du type "overflow: auto". Ce code a été écrit par TheSheer du channel #xul sur irc.mozilla.org, un grand merci à lui.
Attention il faut virer le tag <pre> </pre> en début et fin de code !
<pre>
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="scrollableElement">
<handlers>
<handler event="DOMMouseScroll"><~![CDATA[
this.scrollContent(event.detail > 0 ? 50 : -50 );
]]></handler>
</handlers>
<implementation>
<method name="scrollContent">
<parameter name="aCount"/>
<body><~![CDATA[
var scrollbar = (this.mVerticalScrollbar) ? this.mVerticalScrollbar :
this.mHorizontalScrollbar ;
if (~!scrollbar) return;
var curPos = parseInt(scrollbar.getAttribute('curpos'));
var maxPos = parseInt(scrollbar.getAttribute('maxpos'));
var newPos = Math.max(0, Math.min(maxPos, curPos + aCount));
scrollbar.setAttribute('curpos', newPos);
]]></body>
</method>
</implementation>
</binding>
<binding id="scrollbar"
extends="chrome://global/content/bindings/scrollbar.xml#scrollbar">
<implementation>
<constructor><~![CDATA[
if (navigator.platform.indexOf('Mac') ~!~= -1)
this.initScrollbar();
if (this.orient =~= 'horizontal')
this.parentNode.mHorizontalScrollbar = this;
else
this.parentNode.mVerticalScrollbar = this;
]]></constructor>
<destructor><~![CDATA[
if (this.orient =~= 'horizontal')
this.parentNode.mHorizontalScrollbar = null;
else
this.parentNode.mVerticalScrollbar = null;
]]></destructor>
</implementation>
</binding>
</bindings>
</pre>
Voici quelques lignes à mettre dans un fichier css de votre choix (attention de modifier le path chrome pour qu'il mène à votre fichier XBL :
.scrollable {
overflow: auto;
-moz-binding: url('chrome://ext/content/xbl/scrollableElement.xbl#scrollableElement');
}
.scrollable > scrollbar {
-moz-binding: url('chrome://ext/content/xbl/scrollableElement.xbl#scrollbar');
}
Et un petit exemple de controle des scrollbars. Imaginons que nous avons le code XUL suivant :
<vbox class="scrollable" id="foo" flex="1"/>
Nous pouvons dès lors manipuler les scrollbars (lorsqu'elles sont présentent) de manière très simple grace aux méthodes et aux propriétés de l'élément scrollbar. Les 2 elements accesible sont mVerticalScrollbar et mHorizontalScrollbar.Voici un petit exemple qui nous permet de scroller au plus bas de la vbox :
item = document.getElementById("foo");
maxVerticalPos = item.mVerticalScrollbar.getAttribute('maxpos');
item.mVerticalScrollbar.setAttribute('curpos' , maxVerticalPos);
Le contenu de cette page est disponible selon certaines conditions de réutilisation. Lire aussi la page des informations légales.
Mozilla® est une marque déposée de la fondation Mozilla.
Mozilla.org™, Firefox™, Thunderbird™, Mozilla Suite™ et XUL™
sont des marques de la fondation Mozilla.