Scrollable

Dans la quête du formulaire parfait, voici quelques lignes de javascript qui aident à faire ceci.

1. Du bruit
2. Du bruit
3. Du bruit
4. Du bruit
5. Je devrai être mis en avant au chargement de la page
6. Du bruit
7. Du bruit
1. Du bruit
2. Du bruit
3. Je devrai être mis en avant au chargement de la page
4. Du bruit
5. Du bruit
6. Du bruit
7. Du bruit

Ceci est très pratique quand vous avez beaucoup d’élément dans une liste, et que vous souhaitez mettre en avant l’un d’eux. Par exemple vous avez une série de cases à cocher, et vous souhaitez mettre en avant la plus probable.

Le code

Ceci est les lignes de Javascript qui repositionne le contenu de mon conteneur.

window.onload = function () {
    document.getElementById("scrollable1").scrollTop = document.getElementById("foo1").offsetTop - document.getElementById("scrollable1").offsetTop - 5;
    document.getElementById("scrollable2").scrollTop = document.getElementById("foo2").offsetTop - document.getElementById("scrollable2").offsetTop - 5;
}

Ceci est le CSS employé

div.scrollable {
    height: 3em;
    padding: 0;
    overflow: auto;
    border: 1px inset grey;
    background:#111;
    color:#eee
}
div.scrollable .scroll-item {
    padding: 2px;
    margin: 0;
    min-height: 1em;
}
div.scrollable .scroll-item[id] {
    background : #f55;
}

Ceci est mon code xhtml dont l’affichage est conditionné par le script et la CSS.

<div class="scrollable" id="scrollable1">
    <div class="scroll-item">1. Du bruit</div>
    <div class="scroll-item">2. Du bruit</div>
    <div class="scroll-item">3. Du bruit</div>
    <div class="scroll-item">4. Du bruit</div>
    <div class="scroll-item" id="foo1">5. Je devrai être mis en avant</div>
    <div class="scroll-item">6. Du bruit</div>
    <div class="scroll-item">7. Du bruit</div>
</div>
<div class="scrollable" id="scrollable2">
    <div class="scroll-item">1. Du bruit</div>
    <div class="scroll-item">2. Du bruit</div>
    <div class="scroll-item" id="foo2">3. Je devrai être mis en avant</div>
    <div class="scroll-item">4. Du bruit</div>
    <div class="scroll-item">5. Du bruit</div>
    <div class="scroll-item">6. Du bruit</div>
    <div class="scroll-item">7. Du bruit</div>
</div>