Поддерживать положение прокрутки для 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/


javascript jquery dom scroll-position
person Incognito    schedule 27.07.2011    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Я думаю, это то, что вам нужно?

http://jsfiddle.net/qSx3M/7/

Код:

var alreadyScrolled = $("#smallBox")[0].scrollTop + $("#smallBox").height() == $("#smallBox")[0].scrollHeight;
person Joseph Marikle    schedule 27.07.2011

arrow_upward
1
arrow_downward

Взял ваш код и внес небольшие изменения. Не могу сказать, хороший ли это код, но он работает

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()
);
person Danny    schedule 27.07.2011
comment
Ааааа, вот в чем прикол.... $("#smallBox").height() + $("#smallBox").get()[0].scrollTop - person Incognito; 28.07.2011

arrow_upward
0
arrow_downward

Обычное старое значение прокрутки javascript:

var scrollVal = myDivElem.scrollTop;
person Jon Martin    schedule 27.07.2011
comment
Правильно, это говорит мне, где находится полоса прокрутки с точки зрения пикселей, но не внизу. - person Incognito; 28.07.2011
comment
Это так же просто, как если бы (scrollVal == document.getElementById(DivID).style.height) - person Jon Martin; 28.07.2011

arrow_upward
0
arrow_downward

Попробуй это

var $this;
  $('#container').scroll(function(){
    $this = $(this);
    if ($this.scrollTop() > $this.height()){
       //Do something here
    }
});
person ShankarSangoli    schedule 27.07.2011