我有一个div，只有300像素大，我希望它在页面加载时滚动到内容的底部。这个div有动态添加的内容，需要一直向下滚动。现在如果用户决定向上滚动，我不希望它跳回底部，直到用户再次向下滚动
是否有可能有一个div，将保持滚动到底部，除非用户向上滚动，当用户滚动回底部时，它需要保持自己在底部，即使添加了新的动态内容。我该怎么做呢。
当前回答
$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);
现场演示:http://jsfiddle.net/KGfG2/
其他回答
我设法把它修好了。诀窍是计算:(a)当前div用户滚动位置和(b) div滚动高度，都是在附加新元素之前。
如果a === b，则在追加新元素之前就知道用户位于底部。
let div = document.querySelector('div.scrollableBox');
let span = document.createElement('span');
span.textContent = 'Hello';
let divCurrentUserScrollPosition = div.scrollTop + div.offsetHeight;
let divScrollHeight = div.scrollHeight;
// We have the current scroll positions saved in
// variables, so now we can append the new element.
div.append(span);
if ((divScrollHeight === divCurrentUserScrollPosition)) {
// Scroll to bottom of div
div.scrollTo({ left: 0, top: div.scrollHeight });
}
基于吉姆霍尔斯的解决方案和意见。https://stackoverflow.com/a/44051405/9208887。
我额外添加了一个flex 1 1 0%的元素，以确保文本在容器未满时从顶部开始。
// just to add some numbers, so we can see the effect // the actual solution requires no javascript let num = 1001; const container = document.getElementById("scroll-container"); document.getElementById("adder").onclick = () => container.append( Object.assign(document.createElement("div"), { textContent: num++ }) ); .scroll-wrapper { height: 100px; overflow: auto; display: flex; flex-direction: column-reverse; border: 1px solid black; } .scroll-start-at-top { flex: 1 1 0%; } <div class="scroll-wrapper"> <span class="scroll-start-at-top"></span> <div id="scroll-container"> <div>1000</div> </div> </div> <button id="adder">Add Text</button>
我发现最友好的解决方案是将滚动-快照-对齐方法与少量Javascript结合起来。前一种解决方案本身的问题是，抓拍太强了，你必须滚动很远才能摆脱它。
相反，我们可以在容器滚动到底部时使用捕捉动态，然后在用户向上滚动超过某个阈值时禁用它。
这个解决方案还有一个额外的好处，那就是它是一个渐进的增强:如果用户禁用了Javascript，它就会退回到只使用css的方法。
const container = document.getElementById("container"); const snap = document.getElementById("snap"); // Scroll the view to the bottom once initially container.scrollTop = container.scrollHeight; container.addEventListener("scroll", (event) => { const target = event.currentTarget; const scroll = target.scrollTop; const maxScroll = target.scrollHeight - target.clientHeight; const threshold = 50; // px isScrollBottomedOut = maxScroll - scroll < threshold; // If the user scrolls up more than the threshold, disable snapping // If the user scrolls down again, reenable snapping snap.style.display = isScrollBottomedOut ? "block" : "none"; }); #container { width: 200px; height: 500px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; -ms-scroll-chaining: none; overscroll-behavior: contain; -ms-scroll-snap-type: y proximity; scroll-snap-type: y proximity; border: 2px solid black; } #snap { scroll-snap-align: end; } <div id="container"> <ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol> <!-- This is the snapping target, if visible --> <div id="snap"></div> </div>
这可能对你有帮助:
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;
});
$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);
现场演示:http://jsfiddle.net/KGfG2/
