javascript - only - jquery ui themes

¿Cómo prevenir el desplazamiento en prepend?

Question

Estoy anteponiendo contenido a la parte superior del cuerpo. A veces, este contenido puede tener entre 400 y 500 píxeles de alto, y cuando se agrega algo como esto, presionar el contenido hacia abajo cuando lee la página puede ser realmente molesto.

Quiero que los elementos se anexen automáticamente, no algo así como hacer clic aquí para ver los nuevos artículos.

¿Hay alguna manera de anteponer este contenido a la parte superior del cuerpo sin mover la página? Entonces, cuando un usuario se desplaza hacia arriba, ¿ya está allí?

Answer 1

Creo que la forma más universal de hacer esto sería simplemente medir la altura del documento antes y después de haberlo modificado:

var old_height = $(document).height();  //store document height before modifications
var old_scroll = $(window).scrollTop(); //remember the scroll position

//do anything
$("p:first").prepend( "<p>I just became first</p>" );

$(document).scrollTop(old_scroll + $(document).height() - old_height); //restore "scroll position"

De esa forma, puedes hacer cualquier cosa sin que la ventana se aleje del contenido que estás leyendo :)

Answer 2

Lo hice en el pasado al anteponer los elementos, luego calcular su altura total exterior, y configurar el desplazamiento en ese valor. Algo como esto:

var $current_top_element = $(''body'').children().first();
$(''body'').prepend(other_elements);

var previous_height = 0;
$current_top_element.prevAll().each(function() {
  previous_height += $(this).outerHeight();
});

$(''body'').scrollTop(previous_height);

Espero que esto te indique la dirección correcta.

Answer 3

Lo sé, llegué muy tarde a ese tema. Perdón por descomprimirlo, pero descubrí una manera muy simple para evitar que el desplazamiento suba a la parte superior cuando antepone elementos al cuerpo.

El desplazamiento automático se agrega cuando la posición Y del desplazamiento está en cero. Simplemente haz esto:

element.scrollTo(0, 1);

Y su elemento no irá automáticamente a la cima después del prepend.

Answer 4

Tomé un enfoque ligeramente diferente:

Comience por obtener el primer elemento del cuerpo (o de otro elemento si está fingiendo un elemento distinto del cuerpo que es lo que necesitaba), luego, después de anteponer el nuevo conjunto de elementos, use el desplazamiento (si es necesario desplazarse) relativa al cuerpo) o la posición (si es necesario desplazarse en relación con un elemento antecesor) funciona en el primer elemento original para obtener sus coordenadas actualizadas y desplazarse a ese punto.

Algo como:

var current_top_element = $(''body'').children().first();
$(''body'').prepend(other_elements);

$(''body'').scrollTop(current_top_element.offset().top);

O para algo más que desplazamiento del cuerpo:

var current_top_element = $(''#ul-element-id li:first''); //example with a list
$(''#ul-element-id'').prepend(other_elements);

$(''#ul-element-id'').scrollTop(current_top_element.position().top);

Tenga en cuenta que position () devuelve la posición del elemento relativo a su desplazamiento padre , así que asegúrese de establecer el atributo de posición css de su elemento principal según sea necesario ( http://api.jquery.com/offsetParent/ )

Para más detalles, consulte: http://api.jquery.com/category/offset/