Как предотвратить прокрутку на препенде

Question

Я добавляю контент в начало тела. Иногда этот контент может иметь высоту 400-500 пикселей, и когда добавляется что-то подобное, нажатие на контент вниз, когда вы читаете страницу, может быть очень раздражающим.

Я хочу, чтобы элементы добавлялись автоматически, а не что-то вроде щелчка здесь, чтобы увидеть новые элементы.

Есть ли способ добавить этот контент в верхнюю часть тела, не перемещая страницу? Затем, когда пользователь прокручивает вверх, он уже там?

Answer 1

Я считаю, что самый универсальный способ сделать это - просто измерить высоту документа до и после того, как вы изменили его:

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"

Таким образом, вы действительно можете сделать что угодно, не отодвигая окноиз контента, который вы читаете:)

Answer 2

В прошлом я делал это, предварительно добавляя элементы, затем вычисляя их общую внешнюю высоту и устанавливая в качестве значения прокрутки.Примерно так:

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);

Надеюсь, это направит вас в правильном направлении.

Answer 3

Я выбрал немного другой подход:

Начните с получения первого элемента тела (или другого элемента, если вы претендуете на элемент, отличный от тела, который мне нужен), затем, после добавления нового набора элементов, используйте смещение (если необходимо прокрутить относительно тела) или функция position (если необходимо прокрутить относительно элемента-предка) в исходном первом элементе, чтобы получить его обновленные координаты и прокрутить до этой точки.

Что-то вроде:

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

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

Или для чего-то кроме прокрутки тела:

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);

Имейте в виду, что position () возвращает позицию элемента относительно его родительского смещения , поэтому при необходимости установите атрибут css position вашего родительского элемента () http://api.jquery.com/offsetParent/)

Для более подробной информации обратитесь к: http://api.jquery.com/category/offset/

Answer 4

Я знаю, я очень поздно к этой теме.Извините за удаление этого, но я обнаружил очень простой способ предотвратить прокрутку вверх, когда вы добавляете элементы к телу.

Автоматическая прокрутка добавляется, когда позиция Y прокрутки находится в нуле.Просто сделайте это:

element.scrollTo(0, 1);

И ваш элемент не перейдет автоматически на вершину после предоплаты.