Javascript 如何滚动到动态添加的最后一个div？_Javascript_Jquery_Html_Css

Javascript 如何滚动到动态添加的最后一个div？

javascript jquery html css

Javascript 如何滚动到动态添加的最后一个div？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经在一个文件（chat.html（比如））中添加了div标记，当我们单击按钮时，我正在脚本中向div动态添加行。我在另一个文件中添加了iframe标记，比如（list.html），并将src属性分配给chat.html。当chat.html页面被加载时，除非我需要手动滚动到div的末尾，否则它不会进入div的末尾。相反，它应该自动滚动到div的末尾，并且每当添加div时，它都应该滚动到div //list.html page code <body> <div class=

我已经在一个文件（chat.html（比如））中添加了div标记，当我们单击按钮时，我正在脚本中向div动态添加行。我在另一个文件中添加了iframe标记，比如（list.html），并将src属性分配给chat.html。当chat.html页面被加载时，除非我需要手动滚动到div的末尾，否则它不会进入div的末尾。相反，它应该自动滚动到div的末尾，并且每当添加div时，它都应该滚动到div

//list.html page code
<body>
 <div class="row">
    <div class="col-lg-6 mx-auto mt-5">
        <iframe width="1000px" height="650px" src="EarlyChat.html" ></iframe>
    </div>
  </div>
</body>

//chat.html page code
<section style="padding: 50px 0 0 0">
 <div id="questions" style="margin-bottom: 85px !important;"></div>
   <div class="msg-box">
     <div class="form-group">
       <input type="text" class="input-box sty-one" id="message" placeholder="Enter message"> <button type="submit" class="btn btn-primary btn-lg mb-2" style="margin-top: 5px" onclick="sendmessage()">send</button> 
     </div>
    </div>
  </section>

//list.html页面代码
//chat.html页面代码
发送

函数sendmessage（）{
db.collection（“聊天室”）.doc（userid）。collection（“城市”）。orderBy（“时间”）
.onSnapshot（函数（querySnapshot）{
var store_row=document.createElement（“问题”）；
var存储；
$（“#问题”）.empty（）；
querySnapshot.forEach（函数（doc）{
typeofmessage=doc.data（）.SenderId；
时间=doc.data（）.time.toDate（）；
log（“typeofmessage值为”，typeofmessage，时间）；
message=doc.data（）.message；
控制台日志（“消息”）
store=document.createElement（“div”）；
if（typeofmessage==“Df”）{
//控制台日志（“左”）
leftids.push（消息）
log（“store.getAttributes”，store.getAttribute.id）
store.setAttribute（“类”、“卡无边框”）；
store.setAttribute（“id”，doc.id）；
store.innerHTML=`
`+message+`
`+time.getHours（）+“：“+time.getMinutes（）+`
`;
}
else if（typeofmessage==userid）{
console.log（“右”）
rightids.push（消息）
//store=document.createElement（“div”）；
store.setAttribute（“类”、“卡无边框”）；
store.setAttribute（“id”，doc.id）；
store.innerHTML=`
`+message+`
`+time.getHours（）+“：“+time.getMinutes（）+`
`;
}
存储\行追加（存储）；
console.log（“storerow.count为”，store\u行）
document.getElementById（“问题”）.innerHTML=store\u row.innerHTML；
});
});
}

您可以在src属性中提及id或name，以自动跳转到特定的div标记。首先，您应该为每个div标记分配不同的id，然后单击按钮时，您应该将最后一个div标记的id追加到list.html中iframe的src属性中，如下所示

<iframe width="1000px" height="650px" src="EarlyChat.html#message1" ></iframe> // assuming message1 is id of last div tag.

//假设message1是最后一个div标记的id。

有关详细信息，请访问

<iframe width="1000px" height="650px" src="EarlyChat.html#message1" ></iframe> // assuming message1 is id of last div tag.

//假设message1是最后一个div标记的id。

有关更多信息，请访问您可以使用

窗口的滚动到方法和最后一个div的offsetTop
属性来完成此操作


我已经简化了你的例子，以便在实际中加以说明。下面，我动态添加元素，保留对最后一个元素的offsetTop
的引用，然后滚动到元素offsetTop

唯一需要注意的是，我必须使用setTimeout
来确保新元素已进入DOM
<!DOCTYPE html>
<html>
    <body>
        <h1>Hello World</h1>
    </body>
    <script>
        // Simulate an array of data to render new content
        const paragraphs = []
        let lastParagraphY = 0

        for (let i = 0; i < 20; i++) {
            paragraphs.push(`This is paragraph ${i}. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`)
        }

        // Dynamically create new html nodes
        paragraphs.forEach((paragraph, index) => {
            const body = document.querySelector('body')
            const newParagraph = document.createElement('p')
            newParagraph.innerHTML = paragraph
            newParagraph.id = index
            body.appendChild(newParagraph)
            lastParagraphY = newParagraph.offsetTop
        })

        // Ensure the dynamic elements have rendered
        setTimeout(() => {
            window.scrollTo(0, lastParagraphY)
        })
    </script>
</html>


你好，世界
//模拟数据数组以呈现新内容
常量段落=[]
设lastParagraphY=0
for（设i=0；i<20；i++）{
段落.推送（`这是第${i}段）.Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，当一位不知名的印刷商拿起一个打印工具，争先恐后地制作一本字体样本书时，Lorem Ipsum就一直是印刷和排版行业的标准虚拟文本。它不仅存活了五个世纪，而且还跨越到了电子排版，仍然是一本空白整体上没有变化。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近又随着Aldus PageMaker等桌面出版软件的发布而流行，包括Lorem Ipsum版本
}
//动态创建新的html节点
段落。forEach（（段落，索引）=>{
const body=document.querySelector（'body'）
const newparagration=document.createElement（'p'）
newparagration.innerHTML=段落
newparagration.id=索引
正文.追加子项（新段落）
lastParagraphY=newParagraphy.offsetTop
})
//确保已渲染动态元素
设置超时（（）=>{
window.scrollTo（0，最后一段）
})
您可以使用窗口的滚动到方法和最后一个div的offsetTop
属性来完成此操作


我已经简化了你的例子，以便在实际中加以说明。下面，我动态添加元素，保留对最后一个元素的offsetTop
的引用，然后滚动到元素offsetTop

唯一的警告是我必须使用setTimeout