jQuery scrollTop不适用于具有高度和滚动条的HTML元素

时间:2014-11-22 18:55:21

标签: javascript jquery css asp.net-mvc

所以我有流动的HTML:

<div class="textconvo col-md-10 col-md-offset-1">
                    <div class="row sender">
                        <div class="col-sm-3">
                            Heather Harris
                        </div>
                        <div class="col-sm-6">
                            sun
                        </div>
                        <div class="col-sm-2">
                            11/21/2014 6:58 PM
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            robert
                        </div>
                        <div class="col-sm-6">
                            dfgdfgdfgdfg
                        </div>
                        <div class="col-sm-2">
                            11/21/2014 8:31 PM
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            robert
                        </div>
                        <div class="col-sm-6">
                            assdfsdfsdf
                        </div>
                        <div class="col-sm-2">
                            11/21/2014 8:57 PM
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            robert
                        </div>
                        <div class="col-sm-6">
                            sdfsdfsdf
                        </div>
                        <div class="col-sm-2">
                            11/21/2014 8:58 PM
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            robert
                        </div>
                        <div class="col-sm-6">
                            sdfsdfsdf
                        </div>
                        <div class="col-sm-2">
                            11/21/2014 8:58 PM
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            robert
                        </div>
                        <div class="col-sm-6">
                            sdfsdfsdfsdf
                        </div>
                        <div class="col-sm-2">
                            11/21/2014 8:58 PM
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            robert
                        </div>
                        <div class="col-sm-6">
                            sdfsdfsdf
                        </div>
                        <div class="col-sm-2">
                            11/21/2014 8:58 PM
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            robert
                        </div>
                        <div class="col-sm-6">
                            sdsdf
                        </div>
                        <div class="col-sm-2">
                            11/21/2014 9:06 PM
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            robert
                        </div>
                        <div class="col-sm-6">
                            sdfsdfsdf
                        </div>
                        <div class="col-sm-2">
                            11/21/2014 9:06 PM
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3">
                            robert
                        </div>
                        <div class="col-sm-6">
                            fdgdfgdfg
                        </div>
                        <div class="col-sm-2">
                            11/21/2014 9:31 PM
                        </div>
                    </div>
                 <div style="display: none;" id="newMessagePlaceHolder-3665048123427363225"></div>
            </div>

这个CSS:

 .textconvo
{
    overflow-y: scroll;
    -ms-overflow-y: scroll;
    height: 300px;
}

这个jQuery调用了document.ready:

  $('.textconvo').each(function () {
        $(this).scrollTop($(this)[0].scrollHeight); //scrollHeight = 0
        $(this).scrollTop(500); //this doesn't work either
    });

我之前在其他应用程序中完成了这个scrollTop并且它已经工作了,div.textconvo在DOM中。

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

刚刚测试过您的代码并且它有效,也许您没有将jQuery加载为$

请在此处查看JSFiddle