根据滚动条位置维护 div 的滚动位置答案

【问题标题】：Maintain scroll position for a div based on scroll bar position根据滚动条位置维护 div 的滚动位置
【发布时间】：2011-10-14 14:10:53
【问题描述】：

我的代码已经写好了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/

【问题讨论】：

标签： javascript jquery dom scroll-position

【解决方案1】：

普通的旧 javascript 滚动值：

var scrollVal = myDivElem.scrollTop;

【讨论】：

对，它告诉我滚动条在像素方面的位置，但如果它在底部则不是。
就像 (scrollVal == document.getElementById(DivID).style.height) 一样简单

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

我想这就是你所追求的？

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

代码：

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

【讨论】：

【解决方案4】：

获取您的代码并进行小幅修改。不能说它是否是好的代码，但它可以工作

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

【讨论】：

啊，这就是诀窍……$("#smallBox").height() + $("#smallBox").get()[0].scrollTop