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

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

Tengo una galería de fotos ajax (sin actualización de página) donde algunos subtítulos están en un div, pero el contenido es de diversa extensión. 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.

preguntado el 16 de mayo de 11 a las 19:05

4 Respuestas

Con jQuery, puede configurar la parte superior del área de desplazamiento de la siguiente manera:

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

Aquí hay una demostración que muestra esto en acción->

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

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

Y una demostración de eso->

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

contestado el 17 de mayo de 11 a las 00:05

Gracias por la sugerencia. Déjame investigar esto también. - Stephen

Le estoy dando la respuesta a Ender. - Stephen

Puedes cambiar el valor de la propiedad scrollTop de los <div> elemento.

Vea element.scrollTop en documentos MDC

Vea element.scrollTop en MSDN

Aunque la scrollTop no forma parte de ningún estándar, es compatible con todos los navegadores principales.

contestado el 17 de mayo de 11 a las 00:05

Interesante. Gracias. Déjame investigar esto. - Stephen

Para mover la barra vertical hacia la parte superior en un elemento desbordado myControl , debes hacer

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

o, en caso de barra horizontal, moverla al principio (izquierda)

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

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

#myControl {
    overflow: hidden;
}

Está asumiendo que la siguiente diapositiva se encuentra en la parte superior. Si tiene diapositivas de posición absoluta, es mejor que haga lo siguiente para asegurarse de desplazarse a la ubicación correcta de nextSlide:

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

contestado el 17 de mayo de 11 a las 10:05

Actualizar después de una prueba, usando 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>

contestado el 17 de mayo de 11 a las 00:05

Esta no es la barra de desplazamiento del navegador. Esta es la barra de desplazamiento que aparece en el div, porque tiene un desbordamiento: declaración automática de CSS. El contenido aparece dentro del div. - Stephen

Nunca lo he usado pero lo intentaste div.scrollTo(x, y) ? - Poco

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.