javascript - siempre - ¿Cómo puedo obtener barras de desplazamiento horizontales en la parte superior e inferior de un div?

posicionar scroll al final

Question

Ya que estoy bastante seguro de que no hay una forma nativa de html o css de hacer esto, estoy abierto a hacerlo con JavaScript. Obviamente, puedo obtener una barra de desplazamiento en la parte inferior de mi div usando desbordamiento: automático en CSS. ¿Hay algún javascript que pueda "clonar" la barra de desplazamiento desde la parte inferior y colocarla en la parte superior del div? Tal vez hay otra manera?

Answer 1

Podrías usar el control deslizante UI de jQuery. Puede leer un tutorial para lograr este efecto en línea en NetTuts: http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/

Answer 2

Puede crear un nuevo elemento ficticio sobre el real, con la misma cantidad de ancho de contenido para obtener una barra de desplazamiento adicional, y luego unir las barras de desplazamiento con los eventos de 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>

Esta es una prueba de concepto que podría mejorarse, por ejemplo. Encuestando o escuchando eventos que puedan cambiar el scrollWidth de element del scrollWidth , por ejemplo, el tamaño de la ventana cuando se está utilizando % longitud, cambios de tamaño de fuente o cambios de contenido impulsados ​​por otros scripts. También hay (como es habitual) problemas con IE que elige renderizar barras de desplazamiento horizontales dentro del elemento y el zoom de la página de IE7. Pero esto es un comienzo.