使用Javascript滚动到div底部

Question

使用Javascript滚动到div底部

5

我使用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底部开始，但不强制用户往下滑动，如果他们正在查看靠近顶部的消息？

- kdubs

你确定 #logtext 是可滚动的元素吗？ - Coffee'd Up Hacker

3个回答

1

尝试使用

标签

。

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

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

- SSYSS

当我添加了这些行时，什么都没有发生。 - kdubs

该解决方案需要 JQuery。 - johnny 5

0

只需专注于元素，使元素可见。

<span id="feed_item" />

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

- Nagarjuna Pamu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- johnny 5 · Accepted Answer

这里来试试：

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