当Div中出现新信息时滚动/定位到底部(通过CheckBox选择)

当Div中出现新信息时滚动/定位到底部是一种常见的前端开发需求，可以通过以下方式实现：

使用JavaScript监听Div中的新信息添加事件，可以通过MutationObserver来实现。当有新信息添加到Div中时，触发回调函数。
在回调函数中，可以通过判断CheckBox的选择状态来确定是否需要滚动到底部。如果CheckBox被选中，则执行滚动操作；如果未选中，则不进行滚动。
滚动到底部可以使用Div的scrollTop属性来实现。将scrollTop设置为Div的scrollHeight，即可将Div滚动到底部。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    #messageDiv {
      height: 200px;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <div id="messageDiv">
    <!-- 初始信息 -->
    <p>这是初始信息</p>
  </div>
  <br>
  <label for="scrollCheckbox">滚动到底部</label>
  <input type="checkbox" id="scrollCheckbox">
  
  <script>
    // 监听Div中的新信息添加事件
    const messageDiv = document.getElementById('messageDiv');
    const scrollCheckbox = document.getElementById('scrollCheckbox');
    
    const observer = new MutationObserver(() => {
      // 判断CheckBox的选择状态
      if (scrollCheckbox.checked) {
        // 滚动到底部
        messageDiv.scrollTop = messageDiv.scrollHeight;
      }
    });
    
    observer.observe(messageDiv, { childList: true });
    
    // 模拟添加新信息
    setInterval(() => {
      const newMessage = document.createElement('p');
      newMessage.textContent = '这是新信息';
      messageDiv.appendChild(newMessage);
    }, 2000);
  </script>
</body>
</html>

在这个示例中，我们创建了一个Div用于显示信息，并添加了一个CheckBox用于控制是否滚动到底部。通过MutationObserver监听Div中的新信息添加事件，当有新信息添加时，判断CheckBox的选择状态，如果选中则将Div滚动到底部。定时器模拟了每2秒添加一条新信息的场景。

这个功能可以在聊天室、实时消息展示等场景中使用，确保用户始终能够看到最新的信息。如果你想了解更多关于前端开发、Div滚动等相关知识，可以参考腾讯云的前端开发产品和文档：