除非用户向上滚动，否则保持溢出 div 滚动到底部
我有一个只有 300 像素大的 div，我希望它在页面加载时滚动到内容的底部。这个 div 有动态添加的内容，需要一直向下滚动。现在，如果用户决定向上滚动，我不希望它跳回底部，直到用户再次向下滚动
是否有可能让一个 div 保持滚动到底部，除非用户向上滚动并且当用户滚动回底部时，即使添加了新的动态内容，它也需要将自己保持在底部。我将如何去创造这个。
我只能使用 CSS 来实现它。
诀窍是使用 display: flex; 和 flex-direction: column-reverse;
浏览器将底部视为顶部。假设您的目标浏览器支持 flex-box，唯一需要注意的是标记必须以相反的顺序排列。
这是一个工作示例。 https://codepen.io/jimbol/pen/YVJzBg
这可能会帮助您：
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;
});
angular.element(document).ready(function () {。在这个函数中，我设置了滚动条。
setTimeout() 对我来说比 setInterval() 效果更好。
setInterval。
我刚刚实现了这个，也许你可以使用我的方法。
假设我们有以下 HTML：
<div id="out" style="overflow:auto"></div>
然后我们可以检查它是否滚动到底部：
var out = document.getElementById("out");
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
scrollHeight 为您提供元素的高度，包括由于溢出而导致的任何不可见区域。 clientHeight 为您提供 CSS 高度或以另一种方式表示，元素的实际高度。两种方法都返回没有 margin 的高度，所以你不必担心。 scrollTop 为您提供垂直滚动的位置。 0 是顶部，最大值是元素的滚动高度减去元素本身的高度。使用滚动条时，很难（对我来说是在 Chrome 中）将滚动条一直向下移动到底部。所以我投入了 1px 的误差。因此，即使滚动条距离底部 1px，isScrolledToBottom 也会为真。您可以将其设置为适合您的任何内容。
然后只需将元素的 scrollTop 设置到底部即可。
if(isScrolledToBottom)
out.scrollTop = out.scrollHeight - out.clientHeight;
我为您制作了一个小提琴来展示这个概念：http://jsfiddle.net/dotnetCarpenter/KpM5j/
编辑：添加了代码片段以阐明 isScrolledToBottom 何时为 true。
将滚动条粘贴到底部
const out = document.getElementById("out") let c = 0 setInterval(function() { // 通过添加 1 允许 1px 不准确 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) // 滚动到底部if isScrolledToBottom 为真 if (isScrolledToBottom) { out.scrollTop = out.scrollHeight - out.clientHeight } }, 500) function format () { return Array.prototype.slice.call(arguments).join(' ') } #out {高度：100px； }
明确一点：如果我们一直向下滚动，我们希望滚动条一直停留在底部。如果我们向上滚动，那么我们不希望内容移动。
if(!isScrolledToBottom)：测试对我来说是错误的（并且在我修复它之前无法在 my 代码中工作）。
out.scrollHeight - out.clientHeight <= out.scrollTop + 1 的问题。您是否在 CSS 中使用填充？
在 2020 年，您可以使用 css snap，但在 Chrome 81 之前布局更改将not trigger re-snap，pure css chat ui 适用于 Chrome 81，您也可以检查 Can I use CSS snap。
此演示将捕捉最后一个元素（如果可见），滚动到底部以查看效果。
.container {溢出-y：滚动； overscroll-behavior-y：包含；滚动快照类型：y 接近度； } .container > div > div:last-child { scroll-snap-align: end; } .container > div > div { 背景：浅灰色；高度：3rem；字体大小：1.5rem； } .container > div > div:nth-child(2n) { 背景：灰色； }
https://i.stack.imgur.com/Vrhja.gif
编辑
使用 scroll-snap-type: y proximity;，向上滚动更容易。
$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);
现场演示：http://jsfiddle.net/KGfG2/
$('#div1').scrollTop($('#div1')[0].scrollHeight);
Or animated:
$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);
.cont{ 高度：100px;溢出-x：隐藏；溢出-y：自动；变换：旋转（180度）；方向：rtl；文本对齐：左； } ul{ 溢出：隐藏；变换：旋转（180度）； }
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
运行代码片段查看效果。 （PS：如果运行代码片段不工作，试试这个：https://jsfiddle.net/Yeshen/xm2yLksu/3/）它是如何工作的：
默认溢出是从上到下滚动。
transform: rotate(180deg) 可以使其从下到上滚动或加载动态块。
创见：
https://blog.csdn.net/yeshennet/article/details/88880252
Run code snippet，直接看效果。
基于 Jim Halls 的解决方案和评论。 https://stackoverflow.com/a/44051405/9208887。
我还添加了一个带有 flex 1 1 0% 的元素，以确保文本在容器未满时从顶部开始。
// 只是添加一些数字，所以我们可以看到效果 // 实际解决方案不需要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 { 高度：100px;溢出：自动；显示：弯曲；弹性方向：列反向；边框：1px纯黑色； } .scroll-start-at-top { flex: 1 1 0%; }
这是基于 a blog post by Ryan Hunt 的解决方案。它取决于 overflow-anchor CSS 属性，它将滚动位置固定到滚动内容底部的元素。
函数 addMessage() { const $message = document.createElement('div'); $message.className = '消息'; $message.innerText = `随机数 = ${Math.ceil(Math.random() * 1000)}`; $messages.insertBefore($message, $anchor); // 当滚动条溢出时触发滚动锁定 if (!overflowing) { overflowing = isOverflowing($scroller); $scroller.scrollTop = $scroller.scrollHeight; } } function isOverflowing($el) { return $el.scrollHeight > $el.clientHeight; } const $scroller = document.querySelector('.scroller'); const $messages = document.querySelector('.messages'); const $anchor = document.querySelector('.anchor');让溢出=假； setInterval(addMessage, 1000); .scroller { 溢出：自动；高度：90vh；最大高度：11em；背景：#555； } .messages > * { 溢出锚：无； } .anchor { 溢出锚：自动；高度：1px； } .message { 边距：.3em;填充：0.5em；背景：#eee; }
请注意，overflow-anchor 目前在 Safari 中不起作用。
我无法得到前两个答案，其他答案都对我没有帮助。所以我从 Reddit r/forhire 和 Upwork 向三个人支付了 30 美元，得到了一些非常好的答案。这个答案应该可以为您节省 90 美元。
Justin Hundley / The Site Bros 的解决方案
HTML
<div id="chatscreen">
<div id="inner">
</div>
</div>
CSS
#chatscreen {
width: 300px;
overflow-y: scroll;
max-height:100px;
}
Javascript
$(function(){
var scrolled = false;
var lastScroll = 0;
var count = 0;
$("#chatscreen").on("scroll", function() {
var nextScroll = $(this).scrollTop();
if (nextScroll <= lastScroll) {
scrolled = true;
}
lastScroll = nextScroll;
console.log(nextScroll, $("#inner").height())
if ((nextScroll + 100) == $("#inner").height()) {
scrolled = false;
}
});
function updateScroll(){
if(!scrolled){
var element = document.getElementById("chatscreen");
var inner = document.getElementById("inner");
element.scrollTop = inner.scrollHeight;
}
}
// Now let's load our messages
function load_messages(){
$( "#inner" ).append( "Test" + count + "<br/>" );
count = count + 1;
updateScroll();
}
setInterval(load_messages,300);
});
Preview the site bros' solution
Lermex / Sviatoslav Chumakov 的解决方案
HTML
<div id="chatscreen">
</div>
CSS
#chatscreen {
height: 300px;
border: 1px solid purple;
overflow: scroll;
}
Javascript
$(function(){
var isScrolledToBottom = false;
// Now let's load our messages
function load_messages(){
$( "#chatscreen" ).append( "<br>Test" );
updateScr();
}
var out = document.getElementById("chatscreen");
var c = 0;
$("#chatscreen").on('scroll', function(){
console.log(out.scrollHeight);
isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 10;
});
function updateScr() {
// allow 1px inaccuracy by adding 1
//console.log(out.scrollHeight - out.clientHeight, out.scrollTop + 1);
var newElement = document.createElement("div");
newElement.innerHTML = c++;
out.appendChild(newElement);
console.log(isScrolledToBottom);
// scroll to bottom if isScrolledToBotto
if(isScrolledToBottom) {out.scrollTop = out.scrollHeight - out.clientHeight; }
}
var add = setInterval(updateScr, 1000);
setInterval(load_messages,300); // change to 300 to show the latest message you sent after pressing enter // comment this line and it works, uncomment and it fails
// leaving it on 1000 shows the second to last message
setInterval(updateScroll,30);
});
Igor Rusinov 的解决方案
HTML
<div id="chatscreen"></div>
CSS
#chatscreen {
height: 100px;
overflow: scroll;
border: 1px solid #000;
}
Javascript
$(function(){
// Now let's load our messages
function load_messages(){
$( "#chatscreen" ).append( "<br>Test" );
}
var out = document.getElementById("chatscreen");
var c = 0;
var add = setInterval(function() {
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
load_messages();
// scroll to bottom if isScrolledToBotto
if(isScrolledToBottom) {out.scrollTop = out.scrollHeight - out.clientHeight; }
}, 1000);
setInterval(updateScroll,30);
});
$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;
这将使用 $(document).height() 属性从 #yourDivID 的高度计算 ScrollTop Position，这样即使将动态内容添加到 div，滚动条也将始终位于底部位置。希望这可以帮助。但是它也有一个小错误，即使我们向上滚动并将鼠标指针从滚动条上移开，它也会自动到达底部位置。如果有人可以纠正这一点，那就太好了。
//Make sure message list is scrolled to the bottom
var container = $('#MessageWindowContent')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;
container.scrollTop = contentHeight - containerHeight;
这是我基于 dotnetCarpenter 的回答的版本。我的方法是纯 jQuery，我为变量命名以使事情更清晰。发生的情况是，如果内容高度大于容器，我们向下滚动额外的距离以获得所需的结果。
适用于 IE 和 chrome..
吉姆霍尔的答案是可取的，因为当你向上滚动时它确实不会滚动到底部，它也是纯 CSS。
然而，非常不幸的是，这不是一个稳定的解决方案：在 chrome 中（可能是由于上面 dotnetCarpenter 描述的 1-px 问题），即使没有用户交互（在添加元素时），scrollTop 的行为也会有 1 个像素的误差。您可以设置 scrollTop = scrollHeight - clientHeight，但是当添加另一个元素时，这将使 div 保持在原位，即“将自身保持在底部”功能不再起作用。
因此，简而言之，添加少量 Javascript（叹气）将解决此问题并满足所有要求：
类似于 https://codepen.io/anon/pen/pdrLEZ 的内容（Coo 的示例），在将元素添加到列表后，还有以下内容：
container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
container.scrollTop = container.scrollHeight - container.clientHeight;
}
其中 29 是一条线的高度。
因此，当用户向上滚动半行时（如果可能的话？），Javascript 将忽略它并滚动到底部。但我想这是可以忽略的。而且，它修复了 Chrome 1 px 的东西。
你可以使用这样的东西，
var element = document.getElementById("yourDivID");
window.scrollTo(0,element.offsetHeight);
以下是您需要的（我尽了最大努力，一路上进行了大量的谷歌搜索）：
<html>
<head>
<script>
// no jquery, or other craziness. just
// straight up vanilla javascript functions
// to scroll a div's content to the bottom
// if the user has not scrolled up. Includes
// a clickable "alert" for when "content" is
// changed.
// this should work for any kind of content
// be it images, or links, or plain text
// simply "append" the new element to the
// div, and this will handle the rest as
// proscribed.
let scrolled = false; // at bottom?
let scrolling = false; // scrolling in next msg?
let listener = false; // does element have content changed listener?
let contentChanged = false; // kind of obvious
let alerted = false; // less obvious
function innerHTMLChanged() {
// this is here in case we want to
// customize what goes on in here.
// for now, just:
contentChanged = true;
}
function scrollToBottom(id) {
if (!id) { id = "scrollable_element"; }
let DEBUG = 0; // change to 1 and open console
let dstr = "";
let e = document.getElementById(id);
if (e) {
if (!listener) {
dstr += "content changed listener not active\n";
e.addEventListener("DOMSubtreeModified", innerHTMLChanged);
listener = true;
} else {
dstr += "content changed listener active\n";
}
let height = (e.scrollHeight - e.offsetHeight); // this isn't perfect
let offset = (e.offsetHeight - e.clientHeight); // and does this fix it? seems to...
let scrollMax = height + offset;
dstr += "offsetHeight: " + e.offsetHeight + "\n";
dstr += "clientHeight: " + e.clientHeight + "\n";
dstr += "scrollHeight: " + e.scrollHeight + "\n";
dstr += "scrollTop: " + e.scrollTop + "\n";
dstr += "scrollMax: " + scrollMax + "\n";
dstr += "offset: " + offset + "\n";
dstr += "height: " + height + "\n";
dstr += "contentChanged: " + contentChanged + "\n";
if (!scrolled && !scrolling) {
dstr += "user has not scrolled\n";
if (e.scrollTop != scrollMax) {
dstr += "scroll not at bottom\n";
e.scroll({
top: scrollMax,
left: 0,
behavior: "auto"
})
e.scrollTop = scrollMax;
scrolling = true;
} else {
if (alerted) {
dstr += "alert exists\n";
} else {
dstr += "alert does not exist\n";
}
if (contentChanged) { contentChanged = false; }
}
} else {
dstr += "user scrolled away from bottom\n";
if (!scrolling) {
dstr += "not auto-scrolling\n";
if (e.scrollTop >= scrollMax) {
dstr += "scroll at bottom\n";
scrolled = false;
if (alerted) {
dstr += "alert exists\n";
let n = document.getElementById("alert");
n.remove();
alerted = false;
contentChanged = false;
scrolled = false;
}
} else {
dstr += "scroll not at bottom\n";
if (contentChanged) {
dstr += "content changed\n";
if (!alerted) {
dstr += "alert not displaying\n";
let n = document.createElement("div");
e.append(n);
n.id = "alert";
n.style.position = "absolute";
n.classList.add("normal-panel");
n.classList.add("clickable");
n.classList.add("blink");
n.innerHTML = "new content!";
let nposy = parseFloat(getComputedStyle(e).height) + 18;
let nposx = 18 + (parseFloat(getComputedStyle(e).width) / 2) - (parseFloat(getComputedStyle(n).width) / 2);
dstr += "nposx: " + nposx + "\n";
dstr += "nposy: " + nposy + "\n";
n.style.left = nposx;
n.style.top = nposy;
n.addEventListener("click", () => {
dstr += "clearing alert\n";
scrolled = false;
alerted = false;
contentChanged = false;
n.remove();
});
alerted = true;
} else {
dstr += "alert already displayed\n";
}
} else {
alerted = false;
}
}
} else {
dstr += "auto-scrolling\n";
if (e.scrollTop >= scrollMax) {
dstr += "done scrolling";
scrolling = false;
scrolled = false;
} else {
dstr += "still scrolling...\n";
}
}
}
}
if (DEBUG && dstr) console.log("stb:\n" + dstr);
setTimeout(() => { scrollToBottom(id); }, 50);
}
function scrollMessages(id) {
if (!id) { id = "scrollable_element"; }
let DEBUG = 1;
let dstr = "";
if (scrolled) {
dstr += "already scrolled";
} else {
dstr += "got scrolled";
scrolled = true;
}
dstr += "\n";
if (contentChanged && alerted) {
dstr += "content changed, and alerted\n";
let n = document.getElementById("alert");
if (n) {
dstr += "alert div exists\n";
let e = document.getElementById(id);
let nposy = parseFloat(getComputedStyle(e).height) + 18;
dstr += "nposy: " + nposy + "\n";
n.style.top = nposy;
} else {
dstr += "alert div does not exist!\n";
}
} else {
dstr += "content NOT changed, and not alerted";
}
if (DEBUG && dstr) console.log("sm: " + dstr);
}
setTimeout(() => { scrollToBottom("messages"); }, 1000);
/////////////////////
// HELPER FUNCTION
// simulates adding dynamic content to "chat" div
let count = 0;
function addContent() {
let e = document.getElementById("messages");
if (e) {
let br = document.createElement("br");
e.append("test " + count);
e.append(br);
count++;
}
}
</script>
<style>
button {
border-radius: 5px;
}
#container {
padding: 5px;
}
#messages {
background-color: blue;
border: 1px inset black;
border-radius: 3px;
color: white;
padding: 5px;
overflow-x: none;
overflow-y: auto;
max-height: 100px;
width: 100px;
margin-bottom: 5px;
text-align: left;
}
.bordered {
border: 1px solid black;
border-radius: 5px;
}
.inline-block {
display: inline-block;
}
.centered {
text-align: center;
}
.normal-panel {
background-color: #888888;
border: 1px solid black;
border-radius: 5px;
padding: 2px;
}
.clickable {
cursor: pointer;
}
</style>
</head>
<body>
<div id="container" class="bordered inline-block centered">
<div class="inline-block">My Chat</div>
<div id="messages" onscroll="scrollMessages('messages')">
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</div>
<button onclick="addContent();">Add Content</button>
</div>
</body>
</html>
注意：您可能需要调整 scrollToBottom 和 scrollMessages 中的 alert 位置（nposx 和 nposy）以满足您的需要...
还有一个指向我自己的工作示例的链接，托管在我的服务器上：https://night-stand.ca/jaretts_tests/chat_scroll.html
这是我的处理方式。我的 div 高度是 650 像素。我决定如果滚动高度在底部的 150px 范围内，则自动滚动它。否则，留给用户。
if (container_block.scrollHeight - container_block.scrollTop < 800) {
container_block.scrollTo(0, container_block.scrollHeight);
}
我设法让这个工作。诀窍是计算：（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 });
}
我试图对 Bootstrap 5 做同样的事情。我正在编写的页面是一个单窗口 html 工具，我希望两列具有可滚动的内容，并且一个需要反转，因为它是一个日志（另一个不太可能滚动，除非故意这样做）。列表和它们的标题也是底部锚定的，我很难让标题保持在弹性可滚动列表的顶部。
多亏了上面的例子，我可以弄清楚我缺少什么并获得正确的类类型来使其工作。
这是我的full example。在我的实际应用程序中，其他两列左侧的第三列具有 mh-100 col overflow-auto 类，并且不需要内部行/列，因为没有标题可以粘贴在顶部（如果视口太小，它将正常滚动）。这些列表有一个 ID，用于选择和添加它们或删除顶部元素（这是反向列表中底部的 <li> 项）。
这里提供了一个较小的版本：
二级滚动示例
普通滚动列表，在顶部增长
- 领导力本身很重要，增强了监测程序。为了
- 从tincidunt价格而不是足球运动员那里讹传足球。作为一名自由足球运动员，想要
- ultricium 蛋白。在它被宣传为巧克力之前，它已经怀孕了，
- 方便。有时饥饿是预料之中的，在它是第一个
- 在喉咙之前。结束忙碌的周末。明天我们需要它
- 不时。智能手机Mauris ac tulles ultrices lectus
- accumsan pellentesque。从来没有人，除了 Euismod ultrice，leo
- 我会喝它，我会把它涂在我的化妆品上。
反向滚动列表，在底部增长
- 我应该喝它，我会把它放在我的脸上。
- 从来没有人，除了 Euismod ultrice，leo
- 时不时地。智能手机莫里斯和 ultris 床的土地
- 在喉咙里。结束忙碌的周末。明天需要
- 舒服。有时我们期待饥饿和他面前的第一个蛋白质。在那之前，宣传是如此怀孕，
- 从开发商那里讹传足球的价格，而不是足球运动员。为了让足球自由自在
- 痛苦本身的故事很重要，教练过程将被追寻。喜欢
如果您的视口高度小于整体内容，则标题应位于列表顶部，并且页面底部的所有内容（实际上是视口高度的 75%，但在此示例中，标题不占用空间它是为）而设计的。
注意：我并不是真正的网络开发人员，只是为日常工作编写一些方便的基于 html 的工具，因此非常欢迎发表评论。
我发现对用户最友好的解决方案是将 the scroll-snap-align approach 与一些 Javascript 结合起来。前一种解决方案本身的问题是快照太强，您必须滚动很远才能摆脱它。
取而代之的是，我们可以在容器滚动到底部时使用捕捉动态，然后在用户向上滚动超过某个阈值时禁用它。
该解决方案还有一个额外的好处，即它是一种渐进式增强：如果用户禁用了 Javascript，它将回退到仅使用 CSS 的方法。
常量容器 = document.getElementById("container");常量 snap = document.getElementById("snap"); // 最初将视图滚动到底部 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; // 如果用户向上滚动超过阈值，禁用捕捉 // 如果用户再次向下滚动，重新启用捕捉 snap.style.display = isScrollBottomedOut ? "block" : "none"; }); #container { 宽度：200px;高度：500px；溢出-y：自动；溢出-x：隐藏； -webkit-溢出滚动：触摸； -ms-滚动链接：无；过度滚动行为：包含； -ms-scroll-snap-type：y 接近度；滚动快照类型：y 接近度；边框：2px纯黑色； } #snap { 滚动对齐：结束； }
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
- item
相似问题
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
overflow:auto; display:flex; flex-direction:column-reverse;应用于外部包装器而不是内部包装器来解决需要反转内容的问题。