コンテナを超えてスクロールし、スクロールして表示できます.

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