DIV滚动器的跨浏览器问题

Cross browser issue with DIV scroller

本文关键字：浏览器 问题 滚动 DIV      更新时间：2023-09-26

要向下滚动我的聊天div，我使用以下代码，它在Chrome和amp；FF。估计除了IE之外，其他所有流行的浏览器都能很好地工作。有人能修改下面的代码吗？或者给我提供一些其他能做同样工作的代码吗（但应该支持跨浏览器）。

    <style type="text/css">
            #div2
            {
                width:250px;
                height:300px;
                background-color:Aqua;
                padding:10px;
                font-family:Calibri;
                overflow:auto;
            }
        </style>
        <script type="text/javascript">
            window.setInterval(function () {
                abc1();
            }, 10);
            function abc1() {
                var tb1 = document.getElementById('TextBox2');
                var div1 = document.getElementById('div1');
                var div2 = document.getElementById('div2');
                if (tb1.value != div1.clientHeight) {
                    div2.scrollTop = div2.scrollHeight;
                    tb1.value = div1.clientHeight;
                }
            }
        </script>
        <div id="div2">
                <div id="div1" runat="server"></div>
        </div>
<asp:TextBox ID="TextBox2" runat="server" style="visibility:hidden"></asp:TextBox>

服务器端代码：

while (dr.Read())
{
    String abc1 = dr[1].ToString();
    String abc2 = dr[2].ToString();
    div1.Controls.Add(new LiteralControl(abc1 + ":" + abc2 + "<br />"));
}

请随意使用JavaScript/CSS/Ajax/jQuery/其他任何技术，但滚动条如何在所有浏览器中都能以类似的方式运行？

编辑1:

主要问题是IE甚至没有在TextBox2中显示div1.clientHeight：（有其他方法可以找到IE的高度吗？

我的建议是使用jQuery并使用它的跨浏览器等价物来获取高度。即CCD_ 3-这将在IE以及所有其他浏览器中工作。

UPDATE-使用jQuery的代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
    window.setInterval(function () {
        abc1();
    }, 10);
    function abc1() {
        var tb1 = $('#TextBox2');
        var div1 = $('#div1');
        var div2 = $('#div2');
        if (tb1.val() != div1.outerHeight()) {
            div2.scrollTop(div2[0].scrollHeight);
            tb1.val(div1.outerHeight());
        }
    }
</script>
相关文章：