根据滚动条位置保持div的滚动位置(Maintain scroll position for a div based on scroll bar position)

根据滚动条位置保持div的滚动位置(Maintain scroll position for a div based on scroll bar position)

我已经在这里写了我的代码。

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/

I've got my code written 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>

What I'm trying to do is, detect if the scroll bar is at the bottom of the window, and if it is, append the new data into the div, then scroll back down to the bottom. In the event that the scroll isn't already at the bottom, do nothing.

I'm not sure which parts of either the DOM or jquery API I can use to accomplish this, I've been trying multiple things and am somewhat stuck here, nothing seems to give me a value in terms of where the scroll bar is, and how much I can can scroll. A percent value would be awesome if I could just get that.

I don't want to use any libraries outside of jQuery, this means no plugins either.

I'm looking to get the same behavior we see in the SO chat rooms, except that it seems to be using the ScrollTo plugin to accomplish what it does.

Update.

I can't just use .height() and .scrollTop, they don't match up.

See this: http://jsfiddle.net/qSx3M/6/

最满意答案

我想这就是你要追求的？

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

码：

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

I think this is what you're after?

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

Code:

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