时间戳

首页 > 解决方案 > Javascript scrollTop 无法按预期工作

javascript - Javascript scrollTop 无法按预期工作

问题描述

<div id="messages" class="messages"></div>
<hr>
<textarea id="contentofmessage" name="content" type="text" maxlength="320" style="box-sizing: border-box; width: 100%; height: 100px; padding: 10px; font-family: Arial, sans-serif; border-radius: 5px; outline: none; border: 2px solid #D3D3D3; resize: none;" placeholder="Type your message here..."></textarea><br><br>
<button id="submit" class="btn_anchor_for_submit">Send</button>
<script>
$("#messages").animate({ scrollTop: $('#messages').prop("scrollHeight")}, 1000);

    $(document).ready(function() {
        $('#submit').click(function(e) {
            e.preventDefault();
            
            $.ajax({
                type: 'POST',
                url: '/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>',
                data: {content: $('#contentofmessage').val()},
            });
            loadlink();
            $("#messages").animate({ scrollTop: $('#messages').prop("scrollHeight")}, 1000);
        });
    });

function loadlink(){
$(document).ready(function(){
   
   $('#messages').load("https://www.example.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>");
   

});
}

loadlink(); // This will run on page load

        setInterval(function () {
            var scrollTarget = $('#messages');
            var pos = scrollTarget.scrollTop();
            scrollTarget.load('https://www.example.com/contact_live_chat/chat_display.html?username=<?php echo $_GET["username"]; ?>', function() {
                $('#messages').scrollTop(pos);
            });
        },5000);
</script>

我用了一些php，你自己测试的时候绝对可以替换它

编辑！！！

我的目标是在页面加载时自动向下滚动 div 中的内容。

标签： javascripthtmljquery

解决方案

也许您应该准确描述您的期望？在您的屏幕截图中，您似乎已经处于领先地位。

你想滚动到提交的消息吗？

var objDiv = document.getElementById("messages");
const { top } = objDiv.getBoundingClientRect();

window.scrollTo({ top } ); // or objDiv.scrollTo({ top });

推荐阅读