Javascript CSS-在ul中附加li标记并带有弯曲方向：列反转无法正常工作

我正在构建一个聊天应用程序界面。聊天信息应该从底部开始，然后用户可以滚动到顶部以延迟加载旧聊天。我按照答案推翻了UL。然而，这种旋转看起来更像是一种黑客行为，滚动条的位置被切换到左边，鼠标滚轮的滚动被反转。所以我决定采用flex元素的好方法

一些聊天信息1
一些聊天信息2
一些聊天信息3
一些聊天信息4

因此，如果您在容器上使用

innerHTML+=

，它就会工作，但是如果您使用append，您会在Chrome中遇到一个错误。可能与浏览器重新渲染触发器有关：

const buttonAppend=document.getElementById（'add-button-append'）；
const-buttonInner=document.getElementById（'add-button-inner'）；
const container=document.getElementById（'message-container'）；
设计数器=0；
buttonAppend.addEventListener（'单击'，（e）=>{
计数器++；
const newItem=document.createElement（'li'）；
newItem.innerHTML=`
${counter}
`;
container.append（newItem）；
})
buttonInner.addEventListener（'单击'，（e）=>{
计数器++；
常量newItem=`

${counter}
`；
container.innerHTML+=newItem；
})

添加项目appendChild
添加项目innerHTML+=

您肯定发现了一个浏览器错误，它在Firefox中运行良好，但与您在Chrome中描述的一样。@CallumMorrisson是的，它在Firefox中运行良好，但在Chrome和Chrome EdgeHi中不起作用，谢谢您的回答。我在实际的聊天屏幕上测试了它，效果非常好。我在哪里可以向chrome开发团队报告这个bug？再次感谢你的帮助好问题，我不知道。也许是new.crbug.com？我从来没有试图报告谷歌的bug，通常只是寻找一个更常见的解决方案。