html div 滚动条自动扩充,让DIV的滚动条自动滚动到最底部的3种方法(推荐)

以下是三种让 DIV 滚动条自动扩充并滚动到底部的方法：

1. 使用 jQuery 插件

可以使用 jQuery 插件 `jquery.slimscroll` 来实现 DIV 滚动条自动扩充和滚动到底部。该插件可以在 DIV 内容超出容器高度时自动出现滚动条，并且可以设置滚动条的样式和位置。

<div id="myDiv" style="height: 200px; overflow-y: auto;">
  <!-- 内容 -->
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slimscroll/1.3.8/jquery.slimscroll.min.js"></script>
<script>
  $('#myDiv').slimScroll({
    height: 'auto',
    scrollTo: '100%',
    railVisible: true
  });
</script>

2. 使用 JavaScript 实现

可以使用 JavaScript 来实现 DIV 滚动条自动扩充和滚动到底部。首先需要监听 DIV 内容的变化，当内容发生改变时，将滚动条滚动到底部。

<div id="myDiv" style="height: 200px; overflow-y: auto;">
  <!-- 内容 -->
</div>

<script>
  var myDiv = document.getElementById('myDiv');
  myDiv.addEventListener('DOMSubtreeModified', function() {
    myDiv.scrollTop = myDiv.scrollHeight;
  });
</script>

3. 使用 CSS 实现

可以使用 CSS 来实现 DIV 滚动条自动扩充和滚动到底部。通过设置 `height` 和 `overflow` 属性，可以让 DIV 内容超出容器高度时自动出现滚动条，并且通过设置 `scroll-behavior` 属性，可以让滚动条滚动到底部时有一个平滑的过渡效果。

<style>
  #myDiv {
    height: 200px;
    overflow-y: auto;
    scroll-behavior: smooth;
  }
</style>

<div id="myDiv">
  <!-- 内容 -->
</div>

<script>
  var myDiv = document.getElementById('myDiv');
  myDiv.innerHTML = '新内容'; // 修改 DIV 内容时会自动出现滚动条并滚动到底部
</script>