Javascript 自动和/或持续向下滚动页面_Javascript_Html_Css

Javascript 自动和/或持续向下滚动页面

javascript html css

Javascript 自动和/或持续向下滚动页面,javascript,html,css,Javascript,Html,Css,我有一个项目，使用javascript和MySQL不断/定期更新的数据库在html页面上不断写入文本当文本开始从窗口中写入时，我想自动向下滚动，但我没有找到方法，你能帮我吗以下是实际代码： <head> <div id="header"></div> <div id="body"></div> <div id="footer"></div> <script type = "t

我有一个项目，使用javascript和MySQL不断/定期更新的数据库在html页面上不断写入文本

当文本开始从窗口中写入时，我想自动向下滚动，但我没有找到方法，你能帮我吗

以下是实际代码：

<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>


#myTable{
宽度：“90%”；
最小宽度：250px；
空白：预包装；
单词包装：打断单词；
位置：绝对位置；
边框：实心0px；
顶部：-600px；
左：320px；
右：320px；
底部：0px；
字体大小：100px；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
文本对齐：左对齐
} 
var-skip=0；
函数获取数据（索引）{
$.ajax({
url:'getData.php'，
键入：“POST”，
数据：（{“跳过”：跳过}），
成功：函数（数据）{
如果（数据和数据修剪（）！=“”）{
跳过=跳过+1；
showText（“myTable”，数据，0,20）；
}
否则{
setTimeout（函数（）{get_data（skip）；}，30000）；
}
},
错误：函数（请求、错误）
{
警报（“请求错误：+JSON.stringify（请求））；
}
});
}
函数showText（目标、消息、索引、间隔）{
if（索引<消息长度）{
$（目标）.append（消息[index++]）；
setTimeout（函数（）{showText（目标、消息、索引、间隔）；}，间隔）；
}
否则{
获取_数据（跳过）；
}
}
//var周期=10000//注意：周期以毫秒为单位传递
获取_数据（跳过）；
//设置间隔（页面刷新，周期）；

和测试页面，这样您就可以看到内容了：

您可以使用香草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更改为表元素

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

更新：我最近注意到您正在使用jquery，这个示例只是设置了一个监视程序并滚动内容更改

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

我不确定。看起来他们是用计时器做的，就像每x秒滚动一次。有没有可能在屏幕外写东西时向下滚动？这似乎是一种方法，但当我这样写的时候，它不会向下滚动。我试过了身体和桌子。也许我做错了什么？我在尝试var objDiv=document.getElementById（“myTable”）时更新了页面；window.scrollTop=objDiv.scrollHeight；它也不起作用。我真的不知道我遗漏了什么。我更新了我的答案，使用scrollTop和scrollHeight，只需要在元素上加上一个高度：hidden；通过在函数“showText”中使用它，它工作得非常好。谢谢：）看到它是如何工作的，我可能还有两个关于您的代码的问题：-您知道是否可以平滑滚动吗？-你知道它是允许用户在写的时候还是不写的时候向上滚动吗？如果你能接受接受，那将很感激：），目前，它被设置为在内容更改时连续向下滚动，因此用户将无法滚动。你必须阻止它。