Кросс-браузерная проблема с DIV-скроллером - PullRequest
Новая
       0

Кросс-браузерная проблема с DIV-скроллером

0 голосов
/ 30 января 2012

Для прокрутки DIV моего чата я использую следующий код, который отлично работает с Chrome и 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 / other, но как прокрутка может вести себя одинаково во всех браузерах?

Редактировать 1:

Основная проблема в том, что IE даже не отображает div1.clientHeight в TextBox2 :( Любой другой способ найти высоту для IE?

1 Ответ

1 голос
/ 30 января 2012

Я бы предложил использовать jQuery и использовать его кросс-браузерный эквивалент для получения высоты. то есть $('#div1').outerHeight() - это будет работать в IE, как и во всех других браузерах.

ОБНОВЛЕНИЕ - Ваш код с использованием 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>
...