为什么这个 div 不会自动滚动？答案

【问题标题】：Why won't this div autoscroll?为什么这个 div 不会自动滚动？
【发布时间】：2011-03-18 15:32:15
【问题描述】：

我的这个工作很好，但自动滚动拒绝工作......知道为什么吗？

PS 我只想使用 jQuery...commentsList 在 commentsPanel 内部

    $.ajax({
            url: 'comments.php',
            type: 'POST',
            data: data,
            cache: false,
            success: function (comments_html) {

                $('#commentsPanel').html(comments_html);
                var commentsList = document.getElementById('#commentsList');
                commentsList.scrollTop = commentsList.scrollHeight;
                $('#loading').hide();
            }
        });

谢谢！

   <div id="commentsPanel">
    <table width="260" height="220" border="0" cellpadding="3">
                    <tr><td height="5"></td><td><span style="text-align:right;"><a href="#close" rel="close_comment">Close</tr>
                    <tr><td height="220" valign="top">
                        <div id="commentsList" style="overflow: auto; width: 260px; height: 220px; text-align=left">
    <!-- CONTENT -->

    </div>
                </td></tr>
                <tr><td height="50">
                <form id="new_comment" name="comment_form" method="post" action="comments.php">
                    <input type="hidden" id="trackID" value="' . $track . '">
                    <input type="text" size="25" id="new_comment_text" /><span style="text-align:right">
                    <input type="submit" value="Comment" id="submit_comment"/></span>
                </form>
                </td></tr>
                </table>
</div>

【问题讨论】：

1：标记在哪里？ 2：你想让它在哪些浏览器/版本中工作？
您发布的 HTML 无效。修复缩进，你会明白我的意思：jsfiddle.net/mattball/NJv6w

标签： jquery ajax autoscroll

【解决方案1】：

使用var commentsList = document.getElementById('#commentsList'); 时，您不需要包含#

var commentsList = document.getElementById('commentsList');

【讨论】：

ajax complete 之后的预期结果是什么？由于您通过调用.html() 来破坏commentsPanel，您想要查看可滚动div 的哪个位置？默认情况下它应该在顶部，但如果不是你可以简单地做commentsList.scrollTop = 0?

【解决方案2】：

有趣的是，你说：“我只想使用 jQuery” 而你却使用 document.getElementById()。

您将 jQuery 与 DOM 方法混为一谈。更改此行：

var commentsList = document.getElementById('#commentsList');

到这里：

var commentsList = $('#commentsList');

【讨论】：

我的意思是，我不想使用插件。
我确实在这里尝试了这两个答案，但它似乎没有工作（还）

【解决方案3】：

$.ajax({
            url: 'comments.php',
            type: 'POST',
            data: data,
            cache: false,
            success: function (comments_html) {

                $('#commentsPanel').html(comments_html);
                var commentsList = $('#commentsList'); //<- changed
                commentsList.scrollTop(commentsList.scrollHeight()); //<- add brackets here
                $('#loading').hide();
            }
        });

【讨论】：

【解决方案4】：

你说 commentsList 是 inside commentsPanel 但你正在用这行替换 commentsPanel 内的所有内容：

$('#commentsPanel').html(comments_html);

你确定commentsList当时确实存在吗？在 var commentsList = ... 行之后添加以下内容。

console.log(commentsList);

确保它确实存在。

【讨论】：