我正在构建一个聊天应用程序界面。聊天信息应该从底部开始，然后用户可以滚动到顶部以延迟加载旧聊天。我按照这个答案来反转UL。然而，旋转似乎更像是一个黑客，滚动条位置切换到左侧，鼠标滚轮滚动被反转。所以我决定采用flex元素的好方法。
<body>
<ul style="display:flex; flex-direction: column-reverse; overflow:auto; position: relative; height: 100%; margin:0; padding:0;">
<li> some chat message1 </li>
<li> some chat message2 </li>
<li> some chat message3 </li>
<li> some chat message4 </li>
</ul>
</body>这很好，应用程序从数据库获取聊天信息，然后将li标签附加到ul标签：
$(element).appendTo('ul')当应用程序lazy在ul顶部加载旧的聊天内容，然后屏幕跳上重叠的聊天元素，底部有额外的空格时，问题就开始了。[注意：在屏幕底部添加新聊天时，准备工作很好，但我试图在屏幕顶部添加旧聊天]
对于简单的演示，请尝试了解添加新li是如何影响的[点击"添加项目"按钮5-6次以查看问题]：
let counter = 0;
$('button').on('click', (e) => {
counter++;
const newItem = $(`
<li>
<div style="height:10em; background: lightgray; margin:0.5em; display:flex; justify-content:center; align-items:center;">
${counter}
</div>
</li>
`)
newItem.appendTo('ul');
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style"height:100%'">
<ul style="display:flex; flex-direction: column-reverse; overflow:auto; height:100vh; position: relative; margin:0; padding:0;"></ul>
<button style="position:fixed; left:0; bottom:0;"> Add item </button>
</body>已测试：Chrome v89.0.4389.90
因此，如果在容器上使用innerHTML +=，它会起作用，但如果使用append，则会在Chrome中遇到错误。可能与浏览器重新渲染触发器有关：
const buttonAppend = document.getElementById('add-button-append');
const buttonInner = document.getElementById('add-button-inner');
const container = document.getElementById('message-container');
let counter = 0;
buttonAppend.addEventListener('click', (e) => {
counter++;
const newItem = document.createElement('li');
newItem.innerHTML = `
<div style="height:10em; background: lightgray; margin:0.5em; display:flex; justify-content:center; align-items:center;">
${counter}
</div>`;
container.append(newItem);
})
buttonInner.addEventListener('click', (e) => {
counter++;
const newItem = `
<li>
<div style="height:10em; background: lightgray; margin:0.5em; display:flex; justify-content:center; align-items:center;">
${counter}
</div>
</li>`;
container.innerHTML += newItem;
})<body style="height: 100%">
<ul id="message-container" style="display:flex; flex-direction: column-reverse; overflow:auto; height:100vh; position: relative; margin:0; padding:0;"></ul>
<div style="position:fixed; left:0; bottom:0;">
<button id="add-button-append" > Add item appendChild</button>
<button id="add-button-inner" > Add item innerHTML +=</button>
</div>
</body>可能会破解它，但这听起来是一个骚扰chrome开发团队的好机会。