. cont { 高地:100px; overflow-x:隐藏; overflow-y: auto; 用金币:rotate (180deg); 方向:rtl级; text-align:向左拐; 的 申{ 溢出:隐藏; 用金币:rotate (180deg); 的 < div级= cont”> <德> < li > 0 < / li > < li > 1 < / li > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < li > 5 < / li > < li > 6 < / li > < li > 7 < / li > < li > 8 < / li > < li > 9 < / li > < li > 10 < / li > < /德> < / div >

单击Run代码片段查看效果。(如果运行代码片段不起作用，请尝试以下方法:https://jsfiddle.net/Yeshen/xm2yLksu/3/。)

工作原理:默认情况下溢出滚动是从上到下。Transform: rotate(180deg)将此反转，因此滚动或加载动态块是从下到上的。

创意:https://blog.csdn.net/yeshennet/article/details/88880252

我设法把它修好了。诀窍是计算:(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 });
    }

Jim Hall的答案更可取，因为当你向上滚动时，它确实不会滚动到底部，它也是纯CSS。

然而，非常不幸的是，这不是一个稳定的解决方案:在chrome(可能是由于1像素的问题由dotnetCarpenter上面描述)，scrollTop行为不准确的1像素，即使没有用户交互(在元素添加)。你可以设置scrollTop = scrollHeight - clientHeight，但是当另一个元素被添加时，这将保持div的位置，也就是“保持自己在底部”功能不再工作了。

所以，简而言之，添加少量Javascript(唉)将修复这个问题并满足所有要求:

类似于https://codepen.io/anon/pen/pdrLEZ this(示例由Coo)，在添加一个元素到列表后，还可以执行以下操作:

container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
    container.scrollTop = container.scrollHeight - container.clientHeight;
}

29是直线的高度。

因此，当用户向上滚动半行时(如果可能的话?)，Javascript将忽略它并滚动到底部。但我想这是可以忽略的。而且，它修复了Chrome 1px的东西。

基于吉姆霍尔斯的解决方案和意见。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>

$('#div1').scrollTop($('#div1')[0].scrollHeight);

Or animated:

$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);

我不能让前两个答案工作，其他答案都对我没有帮助。所以我从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); 
});

预览网站兄弟的解决方案

投资组合

---

---

莱尔梅克斯/斯维亚托斯拉夫·丘马科夫的解决方案

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

预览Sviatoslav的解决方案

投资组合

---

---

伊戈尔·鲁西诺夫的解决方案

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

预览Igor的解决方案

投资组合