jQuery scrollTop（值）函数不起作用答案

【问题标题】：jQuery scrollTop(value) function not workingjQuery scrollTop（值）函数不起作用
【发布时间】：2016-01-01 08:29:07
【问题描述】：

我试图在 ajax 调用后滚动一个 div，但它不起作用。 Jquery .scrollTop() not working 和 jQuery scrollTop function not working after ajax call 中提到的解决方案也不起作用。

问题在于这个函数调用：

$("#admin .boxcontent #logadmin")
.scrollTop($("#admin .boxcontent #logadmin")[0].scrollHeight);

它不会滚动 div。控制台也没有错误。

HTML：

<div class="panel-body">
     <div id="admin">
          <div class="boxcontent" style="white-space: pre-wrap;">
               <div id="logadmin" clear="all" style="white-space: pre-wrap;word-wrap: break-word;"></div>
          </div>
     </div>
</div>

Javascript：

function waitForMsg()
{
   $.get("poll.php", function(data)
   {

    if(data!='')
    {
           document.getElementById('logadmin').innerHTML=data;
           console.log("scroll height:"+$("#admin .boxcontent #logadmin")[0].scrollHeight); 
// Works perfectly. Scroll height gets printed in console
           $("#admin .boxcontent #logadmin").scrollTop($("#admin .boxcontent #logadmin")[0].scrollHeight); //Does not work!!! No error in console.

            /*setTimeout(function() {
        $("#admin .boxcontent #logadmin").scrollTop($("#admin .boxcontent #logadmin")[0].scrollHeight);
}, 10);    }*/

    }
    setTimeout("waitForMsg()",1000);
    }).fail(function() {
   setTimeout("waitForMsg()",5000);
    });
}

CSS：

.boxcontent {
font-family: arial,sans-serif;
font-size: 13px;
color: #333333;
height:95%;
width:95%;
overflow-y:auto;
overflow-x:auto;
padding:7px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
border-bottom:1px solid #eeeeee;
background-color: #ffffff;
line-height: 1.3em;}

.panel-body {
height: 80vh;
overflow-y: scroll;}

【问题讨论】：

额外的, 10);} 是什么？
那部分有注释。它是这篇文章中提到的解决方案：stackoverflow.com/questions/17578901/…。但这不起作用。
只是一个提示，我注意到你的选择器效率很低。应该只是 $("#logadmin")，因为那是一个 ID 选择器。
@PatrickRoberts 我试过了，但没用。
@user221458 这不是解决方案，只是建议。否则我会发布答案。

标签： javascript jquery html ajax scrolltop

【解决方案1】：

试试这个代码

function waitForMsg() {
  $.get("poll.php", function(data) {

    if (data != '') {
      document.getElementById('logadmin').innerHTML = json['msg'];
      setTimeout(function() {
          $("#admin .boxcontent #logadmin").scrollTop($("#admin .boxcontent #logadmin")[0].scrollHeight);
          }, 100);

    }
    setTimeout(waitForMsg, 1000);
  }).fail(function() {
    setTimeout(waitForMsg, 5000);
  });
}

【讨论】：

这肯定会导致错误，因为您没有关闭此代码中的括号 $("#admin .boxcontent #logadmin" [0].scrollHeight) 。但是即使我放了支架，也没用。
你能添加那个然后再试一次吗？那只是一个错字。
您可以尝试在第一个 setTimeout 中添加console.log
我在scrollTop函数调用之前和之后在setTimeout中添加了console.log，console.log都被打印了，但是滚动没有发生，也没有其他错误。
让我们continue this discussion in chat.

【解决方案2】：

不确定您是否尝试滚动正确的元素。如果div class="boxcontent 溢出，那么你必须滚动这个而不是$("#admin .boxcontent #logadmin") & 如果你想滚动到顶部，只需传递 0 就足够了。

$("#admin .boxcontent").scrollTop(0);

这里是SAMPLE

我猜这部分有一些逻辑错误

$("#admin .boxcontent #logadmin")[0].scrollHeight .

这实际上会给你#logadmin 的高度和

$("#admin .boxcontent #logadmin").scrollTop($("#admin .boxcontent #logadmin")[0].scrollHeight);

如果执行会将您带到底部而不是顶部。因此，当滚动条位于底部时，它不会滚动并且也不会抛出错误

Explore More

编辑

尝试将height:95% 更改为height:somepixelvalue; 事实上，您可以使用此max-height:sompixelvalue 并删除百分比。喜欢

max-height:200px;

#logadmin 的高度也足够了，你可以使用这个 sn-p

var a = $("#logadmin").height()
$("#admin .boxcontent").scrollTop(a);

Scroll Bottom

请检查此LINK 是否包含所有更改

【讨论】：

我在发布这个问题之前尝试过。但这也行不通。
你能把 HTML 和 css 也发一下吗？
我已经发布了css。
我想去底部而不是顶部。我尝试将滚动条保持在不同的位置，但它不起作用。它只会在新内容到达 logadmin 并且不会滚动时调整大小（变得有点小）。
我尝试将高度更改为像素值，但不幸的是这也不起作用..