ページを自動的かつ/または常時スクロール

私は、JavaScriptとMySQLの常時/定期的に更新されたデータベースを使用して、テキストがHTMLページに常に書き込まれるプロジェクトを持っています。ページを自動的かつ/または常時スクロール

私はtexte開始は、窓の外に書き込まれるときに自動的にスクロールダウンしたいと思いますが、私はそれを行うための方法を見つける見つけることができませんでした、あなたは私を助けることができますか？ここで

は、実際のコードです：

<head> 

    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 

    <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

    <style type="text/css"> 

     #myTable{ 
      width:"90%";    
      min-width:250px; 
      white-space: pre-wrap; 
      word-wrap:break-word; 
      position:absolute; 
      border:solid 0px; 
      top:-600px; 
      left:320px; 
      right:320px; 
      bottom:0px; 
      font-size:100px; 
      font-family:"Times New Roman", Times, serif; 
      text-align:left 
       } 

    </style> 

</head> 

<body> 
    <div id="myTable"> <div> 

    <script type="text/javascript"> 
     var skip = 0; 
     function get_data(index) { 
      $.ajax({ 
       url : 'getData.php', 
       type : 'POST', 
       data: ({"skip":skip}), 
       success : function(data) { 
        if(data && data.trim()!='') { 
         skip = skip+1; 
         showText("#myTable", data, 0, 20); 
        } 
        else { 
         setTimeout(function() { get_data(skip); }, 30000); 
        } 
       }, 
       error : function(request,error) 
       { 
        alert("Request error : "+JSON.stringify(request)); 
       } 
      }); 
     } 

     function showText(target, message, index, interval) { 
      if (index < message.length) { 
       $(target).append(message[index++]); 
       setTimeout(function() { showText(target, message, index, interval); }, interval); 
      } 
      else { 
       get_data(skip); 
      } 
     } 

     //var period = 10000; //NOTE: period is passed in milliseconds 
     get_data(skip); 
     //setInterval(page_refresh, period); 
    </script> 

</body>

そして、テストページ、あなたが何であるかがわかりますので：http://82.223.18.239/writing2.php

出典

2017-08-04 Mathieu Arbez Hermoso

私はわかりません。彼らはタイマーで、x秒ごとにスクロールするようにしたようです。代わりにスクリーンから何かが書き出されたときにスクロールダウンすることは可能ですか？ –

あなたはバニラJavaScriptを使用してコンテンツが読み込まれた後にスクロールすることができます。

success : function(data) { 
    if(data && data.trim()!='') { 
    skip = skip+1; 
    showText("#myTable", data, 0, 20); 

    let table = document.querySelector('#myTable'); 
    table.scrollTop = table.scrollHeight; 
}

必要に応じてdocument.body.scrollHeightをテーブル要素に変更できます。

次に、表に高さとオーバーフロー：hiddenを指定するようにCSSが設定されていることを確認します。

更新：jqueryを使用していたことが遅れていることがわかりました。この例では、ウォッチャーを設定してコンテンツの変更をスクロールします。

$('#myTable').css('overflow', 'hidden').bind('DOMNodeInserted', function() { 
    this.scrollTop = this.scrollHeight; 
});

出典

2017-08-04 19:17:24 jemiloii

これはやり方だと思っていますが、このように置くとスクロールしません。私はボディとmyTableの両方を試しました。たぶん私は何か間違ったことをしました私は、http：//82.223.18.239/writing2.phpのページを更新しました –

私は試しました var objDiv = document.getElementById（ "myTable"）; window.scrollTop = objDiv.scrollHeight; これも機能しません。私は本当に私が逃しているものを知りません。 –

私はscrollTopとscrollHeightを使うために、私の答えを更新しました。 – jemiloii

ページを自動的かつ/または常時スクロール

答えて

関連する問題