聊天室html頁面提交內容後div內容自動滾到底部

在js中讓div的內容自動滾向底部需要將做的就是將div的scrollTop指向div的scrollHeight

代碼如下

<div id='demo' style="overflow='auto'"></div>
<button onclock='tijiao();'>提交</button>
<script>
  function tijiao(){
    var scrollDiv = document.getElementById('demo');
    scrollDiv.scrollTop = scrollDiv.scrollHeight;
}
</script>

jquery中通過選擇器選擇的實際上是包裝後的dom對象雖然可以撥開按照原生的js方式寫但是可以有更優雅一點的方法去寫

<div id='demo2' style="overflow='auto'"></div>
<button>提交</button>
<script>
  $('button').click(function(){
    var scrollDiv = $('#demo2');
    scrollDiv.scrollTop(scrollDiv[0].scrollHeight);
  });
</script>

以上是在聊天室的編寫中所遇的一點小問題


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章