Question

我试图在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;}

Answer 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);
  });
}

Answer 2

不确定您是否正在尝试滚动右侧元素。如果$("#admin .boxcontent #logadmin")溢出，则必须滚动此$("#admin .boxcontent").scrollTop(0);＆amp;如果你想滚动到顶部只是传递0就足够了。

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

这是SAMPLE

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

#logadmin

这实际上会为您提供$("#admin .boxcontent #logadmin").scrollTop($("#admin .boxcontent #logadmin")[0].scrollHeight);和

的高度

height:95%

如果执行将带你到底而不是走到顶部。所以当滚动条在底部时它不会滚动和放大都不会抛出错误

Explore More

修改

尝试将height:somepixelvalue;更改为max-height:sompixelvalue因此，您可以使用此max-height:200px;并删除百分比。喜欢

#logadmin

var a = $("#logadmin").height() $("#admin .boxcontent").scrollTop(a);的高度也足够了，您可以使用此代码段

//ADDING THE EVENT LISTENER document.addEventListener('DOMContentLoaded', init); //DELCARING INIT, PASSING BLANK PARAM, STATEMENT var init = () => console.log('Is Firing');

Scroll Bottom

请检查LINK已包含所有更改

jQuery scrollTop（value）函数不起作用

2 个答案: