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

実現する機能はブラウザコンソールconsoleと似ています.メッセージのリアルタイムプッシュはフロントエンドに表示され、新しいメッセージはページの最後の1つに表示されます.コンテナを超えたデータはスクロール可能で、スクロールバーをドラッグすると、任意のデータを表示できます.

  
  
  
  
  


    

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