コンテナを超えてスクロールし、スクロールして表示できます.
1517 ワード
実現する機能はブラウザコンソールconsoleと似ています.メッセージのリアルタイムプッシュはフロントエンドに表示され、新しいメッセージはページの最後の1つに表示されます.コンテナを超えたデータはスクロール可能で、スクロールバーをドラッグすると、任意のデータを表示できます.
Document
let num = 0
let isScroll = true
let showContent1 = document.getElementById('box1')
setInterval(function(){
let p=document.createElement("p")
num += 1
p.innerHTML=" "+num+" "
showContent1.appendChild(p)
if(isScroll) {
showContent1.scrollTop = showContent1.scrollHeight
}
},500)
showContent1.onscroll= function() {
isScroll = false
let scrollTop = showContent1.scrollTop
let clientHeight = showContent1.clientHeight
let scrollHeight = showContent1.scrollHeight
console.log(scrollTop,clientHeight,scrollHeight)
// scrollHeight > clientHeight
if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
showContent1.scrollTop = showContent1.scrollHeight
isScroll = true
}
}