¿Se puede controlar una barra de desplazamiento CSS overflow en Javascript?

Question

Tengo un div con una clase overflow: auto; ¿Hay alguna manera de controlar esta barra de desplazamiento cuando aparece?

Tengo una galería de fotos ajax (sin actualización de página) donde el texto de algunos leyendas está en div, pero el contenido es de longitud variable. Si se desplaza hacia abajo en este div y luego avanza a la siguiente diapositiva, la barra de desplazamiento no vuelve a la parte superior. Entonces, me preguntaba si había una forma de controlar esta barra de desplazamiento. Gracias.

Answer 1

con jQuery, puede configurar la parte superior del área de desplazamiento de este modo:

$('#contents').scrollTop(0); 

Here's a demo showing this in action->

Tenga en cuenta que esto también es posible sin jQuery:

document.getElementById('contents').scrollTop = 0; 

And a demo of that->

Para ambas demostraciones, presione el botón Restablecer para volver a colocar la barra de desplazamiento en la parte superior.

Answer 2

actualización después de una prueba, utilizando elm.scrollTop = 0:

<div style="overflow:auto;height:100px;width:100px"> 
    <p>test</p> 
    <p>test</p> 
    <p>test</p> 
    <a href="javascript:" onclick="this.parentNode.scrollTop = 0">go up</a> 
</div> 

Answer 3

Puede cambiar el valor de la propiedad scrollTop del elemento <div>.

Ver element.scrollTop en documentos del MDC

Ver element.scrollTop en MSDN

Mientras scrollTop no es parte de ningún estándar, que es compatible con todos los principales navegadores.

Answer 4

Para mover la barra vertical de nuevo a la parte superior de un elemento desbordado myControl, debe hacer

$("#myControl").scrollTop(0); 

o, en el caso de la barra horizontal, para moverlo al principio (izquierda)

$("#myControl").scrollLeft(0); 

Si desea ocultar las barras de desplazamiento, usted debe hacer esto CSS

#myControl { 
    overflow: hidden; 
} 

Estás suponiendo que la siguiente diapositiva reside en la parte superior. Si tiene diapositivas positionated absolutos, es posible hacerlo mejor la siguiente, para asegurar que se desplaza a la correcta nextSlide ubicación:

var nextSlidePos = $("#slide" + nextSlide).position(); 
$("#myControl").scrollTop(nextSlidePos.top).scrollLeft(nextSlidePos.left);