web-dev-qa-db-fra.com

Comment obtenir des barres de défilement horizontales en haut et en bas d'une div?

Comme je suis à peu près sûr qu'il n'y a pas de méthode native HTML ou CSS pour le faire, je suis prêt à le faire avec JavaScript. Évidemment, je peux obtenir une barre de défilement au bas de ma div en utilisant overflow: auto en CSS. Y a-t-il du JavaScript qui pourrait "cloner" la barre de défilement du bas et la placer en haut de la div? Peut-être qu'il y a une autre façon?

javascripthtmlcssscrollbar
31
Byron Sommardahl

Vous pouvez créer un nouvel élément factice au-dessus du réel, avec la même quantité de contenu pour obtenir une barre de défilement supplémentaire, puis lier les barres de défilement avec les événements onscroll.

function DoubleScroll(element) {
    var scrollbar = document.createElement('div');
    scrollbar.appendChild(document.createElement('div'));
    scrollbar.style.overflow = 'auto';
    scrollbar.style.overflowY = 'hidden';
    scrollbar.firstChild.style.width = element.scrollWidth+'px';
    scrollbar.firstChild.style.paddingTop = '1px';
    scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
    scrollbar.onscroll = function() {
        element.scrollLeft = scrollbar.scrollLeft;
    };
    element.onscroll = function() {
        scrollbar.scrollLeft = element.scrollLeft;
    };
    element.parentNode.insertBefore(scrollbar, element);
}

DoubleScroll(document.getElementById('doublescroll'));
#doublescroll
{
  overflow: auto; overflow-y: hidden; 
}
#doublescroll p
{
  margin: 0; 
  padding: 1em; 
  white-space: nowrap; 
}
<div id="doublescroll">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
    </p>
</div>

Il s'agit d'une preuve de concept qui pourrait être améliorée, par exemple. en interrogeant ou en écoutant les événements susceptibles de modifier le scrollWidth de element, par exemple, la taille de la fenêtre lorsque % des longueurs sont utilisées, des changements de taille de police ou des changements de contenu induits par d'autres scripts. Il y a aussi (comme d'habitude) des problèmes avec IE choisissant de rendre les barres de défilement horizontales à l'intérieur de l'élément et le zoom de page d'IE7. Mais c'est un début.

37
bobince

Vous pouvez utiliser l'interface utilisateur de jQuery contrôle du curseur . Vous pouvez lire un tutoriel pour obtenir cet effet en ligne sur NetTuts: http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/

2
Sampson