const out = document.getElementById("out")
let c = 0
setInterval(function() {
// allow 1px inaccuracy by adding 1
const isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1
const newElement = document.createElement("div")
newElement.textContent = format(c++, 'Bottom position:', out.scrollHeight - out.clientHeight, 'Scroll position:', out.scrollTop)
out.appendChild(newElement)
// scroll to bottom if isScrolledToBottom is true
if (isScrolledToBottom) {
out.scrollTop = out.scrollHeight - out.clientHeight
}
}, 500)
function format () {
return Array.prototype.slice.call(arguments).join(' ')
}
;
#out {
height: 100px;
}
;
<div id="out" style="overflow:auto"></div>
<p>To be clear: We want the scrollbar to stick to the bottom if we have scrolled all the way down. If we scroll up, then we don't want the content to move.
</p>
var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;
[编辑],以匹配注释。。。
function updateScroll(){
var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;
}
每当添加内容时,调用updateScroll()函数或设置计时器:
//once a second
setInterval(updateScroll,1000);
如果只想在用户未移动时更新:
var scrolled = false;
function updateScroll(){
if(!scrolled){
var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;
}
}
$("#yourDivID").on('scroll', function(){
scrolled=true;
});
我刚刚实现了这个,也许你可以用我的方法。
假设我们有以下HTML:
然后我们可以检查它是否滚动到底部:
scrollHeight提供元素的高度,包括溢出导致的任何不可见区域。clientHeight给出CSS的高度,或者用另一种方式说,元素的实际高度。这两个方法都返回高度而不返回
margin
,因此不必担心这个问题。scrollTop提供垂直滚动的位置。0是顶部,max是元素的滚动高度减去元素本身的高度。当使用滚动条时,很难(对我来说是用Chrome)将滚动条一直拖到底部。所以我把1倍的误差加进去了。所以isScrolledToBottom
将是真的,即使滚动条从底部是1px。你可以根据自己的感觉来设定。然后,只需将元素的滚动顶部设置为底部。
我做了一把小提琴给你看这个概念:http://jsfiddle.net/dotnetCarpenter/KpM5j/
编辑: 添加了代码片段以澄清
isScrolledToBottom
何时是true
。将滚动条粘贴到底部
这可能有助于您:
[编辑],以匹配注释。。。
每当添加内容时,调用updateScroll()函数或设置计时器:
如果只想在用户未移动时更新:
我只能用CSS来实现。
诀窍是使用
display: flex;
和flex-direction: column-reverse;
浏览器将底部视为顶部。假设目标浏览器支持
flex-box
,唯一需要注意的是标记必须按相反的顺序排列。这是一个有效的例子。https://codepen.io/jimbol/pen/YVJzBg
相关问题 更多 >
编程相关推荐