Автопрокрутка до нижней части DIV после обновления, только если до обновления уже внизу DIV

Question

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

<div id="Scrollable" style="height:400px; overflow:scroll;>
1<br />
2<br />
3<br />
4<br />
</div>

<script>
// Should DIV be auto scrolled?
var autoScroll = true;

// Add new content
$('#Scrollable').append('5<br />6<br />');

if ( autoScroll ){ // Scroll to bottom of DIV
    $('#Scrollable').animate({ scrollTop: $('#Scrollable').prop('scrollHeight') });
}
</script>

Что мне нужно, так это проверка на этапе var autoScroll = true, чтобы определить, прокручивается ли DIV в настоящее время или нет. Таким образом, после добавления нового контента будет автоматически прокручиваться, только если DIV был в нижней части.

Answer 1

С какими проблемами вы столкнулись, когда пытались написать это? Вот пример jsFiddle, основанный на первом результате, который я нашел в Google для «проверки jquery, прокручивается ли div до дна». Вроде нормально работает.

http://jsfiddle.net/QB75Z/

А вот ссылка на найденную мной статью: http://www.yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/

РЕДАКТИРОВАТЬ : Вот фактический код из jsFiddle, который я разместил, на случай, если кто-то ищет и jsFiddle исчезнет. Имейте прокручиваемый div (задайте ему высоту и overflow-y: scroll) с идентификатором прокручиваемого, и внутренний div внутри с классом inner. Затем вы можете определить, прокручивается ли div внизу или нет, используя следующий код:

var scrollable = $('#scrollable');
var inner = $('#scrollable > .inner');

// check if div is scrolled to bottom before addition of new content
var atBottom = Math.abs(inner.offset().top) + scrollable.height() + scrollable.offset().top >= inner.outerHeight();

// add additional content to .inner here

if ( atBottom ) {
  // do stuff like scroll to bottom etc
}

Answer 2

Вот хороший пример этого списка здесь .

Следующая эквивалентность возвращает true, если элемент находится в конце его прокрутки, и false, если это не так.

element.scrollHeight - element.scrollTop === element.clientHeight

Демонстрация, приведенная на этой странице, также очень полезна.