jquery DIV撑大让滚动条滚到最底部代码

1. jQuery DIV撑大让滚动条滚到最底部代码

在项目中，有时候需要让一个DIV元素的滚动条，始终停留在最底部。这时候可以使用JavaScript中的scrollTop属性来控制滚动条位置。具体实现步骤如下：

首先找到这个DIV元素，获取它的scrollHeight和scrollTop属性。然后判断scrollTop属性是否已经到达了最底部，如果没有到达最底部，将scrollTop设置为scrollHeight。

具体代码示例如下：

var div = document.getElementById("myDiv");
div.scrollTop = div.scrollHeight;

以上代码可以确保在打开页面时，滚动条一直在最底部。

如果需要当页面有新内容动态添加时，滚动条也能始终停留在最底部，则需动态监听DIV元素的scrollHeight属性的变化，并在变化时重新将scrollTop属性设置为scrollHeight。

具体代码示例如下：

var div = document.getElementById("myDiv");
div.addEventListener("DOMNodeInserted", function () {
    div.scrollTop = div.scrollHeight;
});

以上代码可以确保在新内容添加后，滚动条依然停留在最底部。

1. jQuery DIV撑大让滚动条滚到最底部代码示例

接下来提供一个实际应用的例子，在聊天框中，永远将滚动条停留在最底部。

HTML代码如下：

<div id="chatDiv" style="overflow-y: auto; height: 200px;"></div>

在这个DIV中，我们设置了一个200px的高度，并设置了overflow-y为auto，这意味着当内容超过了200px时，会出现滚动条。

在JavaScript中，我们可以监视这个DIV的scrollHeight属性，并当它发生变化时，将scrollTop设置为scrollHeight。具体代码如下：

$(document).ready(function() {
    var chatDiv = document.getElementById("chatDiv");
    $("#chatDiv").bind("DOMNodeInserted", function(e) {
        chatDiv.scrollTop = chatDiv.scrollHeight;
    });
});

以上代码首先获取了chatDiv元素，并绑定了一个DOMNodeInserted事件。当chatDiv元素中有新的子元素（此处为聊天记录）插入时，通过chatDiv的scrollHeight属性获取到chatDiv的总高度，然后将scrollTop属性设置为该高度。这样就可以始终让滚动条保持在最底部。

同时也可以在页面加载时，将滚动条设置到最底部。具体代码如下：

$(document).ready(function() {
    var chatDiv = document.getElementById("chatDiv");
    //将聊天记录滚动到最底部
    chatDiv.scrollTop = chatDiv.scrollHeight;
    $("#chatDiv").bind("DOMNodeInserted", function(e) {
        chatDiv.scrollTop = chatDiv.scrollHeight;
    });
});

以上代码在页面加载时，就会将聊天记录滚动到最底部。

总结：
通过以上两个实例，我们可以看到DIV撑大让滚动条滚到最底部的实现方法。这种方法不仅能在聊天窗口中使用，而且也可以用于其他需要滚动条时保持在最底部的场景中。