Поддерживать положение прокрутки для div на основе положения полосы прокрутки
У меня есть мой код, написанный здесь.
setInterval(
function (data){
var alreadyScrolled = $("#smallBox").height() >= $("#smallBox").get()[0].scrollHeight;
$("#smallBox").append(data + "<br />");
if (alreadyScrolled) {
$("#smallBox").scrollTop($("#smallBox").heightoffsetHeight)
}
},
1000,
Date()
);
<div id="largeBox">
<div id="smallBox">
</div>
<input />
</div>
Я пытаюсь определить, находится ли полоса прокрутки внизу окна, и, если это так, добавить новые данные в div, а затем прокрутить вниз до нижней части. Если свиток не находится внизу, ничего не делать.
Я не уверен, какие части API DOM или JQuery я могу использовать для достижения этой цели, я пробовал несколько вещей и несколько застрял здесь, кажется, ничто не дает мне значения с точки зрения того, где находится полоса прокрутки, и сколько я могу прокрутить. Процентное значение было бы здорово, если бы я мог просто получить это.
Я не хочу использовать какие-либо библиотеки за пределами jQuery, это также означает отсутствие плагинов.
Я рассчитываю на то же поведение, которое мы наблюдаем в комнатах чата SO, за исключением того, что, похоже, он использует плагин ScrollTo для выполнения своих задач.
Обновить.
Я не могу просто использовать.height() и.scrollTop, они не совпадают.
Смотрите это: http://jsfiddle.net/qSx3M/6/
4 ответа
Я думаю, это то, что вы после?
Код:
var alreadyScrolled = $("#smallBox")[0].scrollTop + $("#smallBox").height() == $("#smallBox")[0].scrollHeight;
Взял свой код и сделал небольшие модификации. Не могу сказать, хороший ли это код, но он работает
setInterval(
function (data){
var alreadyScrolled = $("#smallBox").height() + $("#smallBox").get()[0].scrollTop >= $("#smallBox").get()[0].scrollHeight;
console.log(alreadyScrolled);
$("#smallBox").append(data + "<br />");
if (alreadyScrolled) {
$("#smallBox").get()[0].scrollTop = $("#smallBox").get()[0].scrollHeight;
}
},
1000,
Date()
);
Обычное старое значение прокрутки JavaScript:
var scrollVal = myDivElem.scrollTop;
Попробуй это
var $this;
$('#container').scroll(function(){
$this = $(this);
if ($this.scrollTop() > $this.height()){
//Do something here
}
});