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

jQuery scrollTop not working for a HTML element with height and scroll bar

本文关键字:滚动条 HTML 元素 高度 scrollTop 不适用 适用于 jQuery      更新时间:2023-09-26

所以我有流动的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 中。

有什么建议吗?

刚刚测试了您的代码并且可以正常工作,也许您没有像$那样加载 jQuery。

在这里查看 JSFiddle.