根据滚动条位置保持div的滚动位置

时间:2011-07-27 19:54:19

标签: javascript jquery dom scroll-position

我的代码是here

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中,然后向下滚动到底部。如果滚动不在底部,则不执行任何操作。

我不确定DOM或jquery API的哪些部分可以用来完成这个,我一直在尝试多种东西而且有点卡在这里,似乎没有什么能给我一个关于滚动位置的值酒吧是,我可以滚动多少。如果我能得到它,那么百分比值就会很棒。

我不想在jQuery之外使用任何库,这意味着没有插件。

我希望得到我们在SO聊天室中看到的相同行为,除了它似乎使用ScrollTo插件来完成它的功能。

更新

我不能只使用.height()和.scrollTop,它们不匹配。

看到这个: http://jsfiddle.net/qSx3M/6/

4 个答案:

答案 0 :(得分:3)

我认为这就是你所追求的目标?

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

<强>代码:

var alreadyScrolled = $("#smallBox")[0].scrollTop + $("#smallBox").height() == $("#smallBox")[0].scrollHeight;

答案 1 :(得分:1)

获取代码并进行少量修改。不能说它是否是好的代码,但它的工作原理

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

答案 2 :(得分:0)

普通的旧javascript滚动值:

var scrollVal = myDivElem.scrollTop;

答案 3 :(得分:0)

试试这个

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