使用Javascript滚动到div的底部

Question

我使用html和javascript创建了一个窗口来显示我的网站生成的显示日志消息。 我想设置它，以便当用户打开日志窗口时，它会自动滚动到日志消息的底部。 我已经得到它以便日志消息正确显示，但我无法使自动滚动工作。

我的html / javascript看起来像这样：

<body>
<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading text-center">
      <h4 class="text-center">Log Messages</h4>
    </div>
    <div class="panel-body">
      <div class="content" id="logtext">
        <font face="courier">
          <span id="show" class='value'></span>
        </font>
      </div>
    </div>
  </div>
  <script language="javascript" type="text/javascript">
    function saveLogs(data){
      sessionStorage.setItem("logs",data.message);
    }
      $(document).ready(
        function() {
          setInterval(function() {
            Dajaxice.InterfaceApp.getLogs(saveLogs);
            var logs = sessionStorage.getItem("logs");
            document.querySelector('.content .value').innerText = logs;
            //I tried doing this and nothing happened.
            var objDiv = document.getElementById("logtext");
            objDiv.scrollTop = objDiv.scrollHeight;
          }, 1000);
        });
  </script>
</div>        
</body>

对dajaxice的调用基本上是抓取我拥有的日志文件的最后n行，然后将它们发送到我定义为saveLogs()的js函数。

我尝试过使用类似问题中给出的一些解决方案，但没有任何运气让他们工作。

编辑我尝试这样设置：

   <div class="panel-body">
      <div class="content" id="logtext">
        <script language="javascript" type="text/javascript">
          document.getElementById('bottomspan').scrollIntoView();
        </script>
        <font face="courier">
          <span id="show" class='value'>
          </span>
          <div id='bottomspan'></div> 
        </font>
      </div>
    </div>
  </div>
  <script language="javascript" type="text/javascript">
    function saveLogs(data){
      sessionStorage.setItem("logs",data.message);
    }
      $(document).ready(
        // document.getElementById('bottomspan').scrollIntoView();
        function() {
          setInterval(function() {
            Dajaxice.InterfaceApp.getLogs(saveLogs);
            var logs = sessionStorage.getItem("logs");
            document.querySelector('.content .value').innerText = logs;
            var el = document.getElementById('bottomspan')
            el.scrollIntoView();
            var height = el.style.clientHeight
            window.scrollBy(0, height);
          },700);
        });
  </script>

这工作除了每次页面刷新新消息时它都会返回到底部; 这使得很难在顶部查看较旧的消息。 有没有办法让它从div的底部开始，但如果他们正在查看顶部附近的消息，请不要强迫用户退缩？

Answer 1

在这里尝试：

document.getElementById('logtext').scrollIntoView();

编辑

document.getElementById('bottomspan').scrollIntoView();

<font face="courier">
      <span id="show" class='value'> content.... 
           <span id='bottomspan'></span>
       </span>
</font>

编辑

var el = document.getElementById('logtext')
el.scrollIntoView();
var height = el.style.clientHeight
window.scrollBy(0, height - window.innerHeight);

编辑以回答编辑

<script language="javascript" type="text/javascript">
    function saveLogs(data){
      sessionStorage.setItem("logs",data.message);
    }
    $(document).ready(
    function() {
      setInterval(function() {
        Dajaxice.InterfaceApp.getLogs(saveLogs);
        var logs = sessionStorage.getItem("logs");
        document.querySelector('.content .value').innerText = 
      },700);

        var el = document.getElementById('bottomspan')
        el.scrollIntoView();
        var height = el.style.clientHeight
        window.scrollBy(0, height);
    });

Answer 2

尝试使用

var $objDiv = $("#logtext");
$objDiv.scrollTop( $objDiv.height() );

你的脚本运行正常： http ： //jsfiddle.net/b1tf63yd/1/

Answer 3

只需关注元素即可使元素可见。

<span id="feed_item" />

document.getElementById("feed_item").focus();

使用Javascript滚动到div的底部

问题描述

3 个解决方案

解决方案1
3 2015-08-26 16:37:51

解决方案2
1 2015-08-26 16:41:15

解决方案3
0 2016-02-29 15:52:30

使用Javascript滚动到div的底部

问题描述

3 个解决方案

解决方案1 3 2015-08-26 16:37:51

解决方案2 1 2015-08-26 16:41:15

解决方案3 0 2016-02-29 15:52:30

解决方案1
3 2015-08-26 16:37:51

解决方案2
1 2015-08-26 16:41:15

解决方案3
0 2016-02-29 15:52:30