Question

我有一个项目，使用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

Answer 1

您可以使用vanilla 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更改为您的table元素。

然后确保css给你的表一个高度并溢出：隐藏。

更新：我很晚才注意到你正在使用jquery，这个例子只是设置一个观察者并滚动内容更改。

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

自动和/或不断向下滚动页面

1 个答案: