使用ajax滚动div不起作用

Posted 2023-02-19

【中文标题】使用ajax滚动div不起作用

【英文标题】：scrolling div with ajax not working

【发布时间】：2017-06-19 15:40:38

【问题描述】：

我已经用 ajax 建立了一对一的支持聊天，效果很好。我注意到，当 ajax 刷新 div，高于 div 高度时，div 只是不断扩大。我注意到许多有同样问题的人被建议使用溢出：自动滚动，我尝试过但没有接缝完全可以工作..有人可以指出我正确的方向以在 div 中获得工作滚动条吗？？

如果做不到这一点，我唯一的选择是使用我真的不喜欢的 iframe。

<table   border="0"><TR ><TD >

<div id="adminlog"  ></div>
</TD></TR><TR><TD><textarea rows="4" name="input" id="input" cols="100" style="width: 80%; border:solid 1px orange; background-color: lightyellow;">
</textarea>
<input type="button" value="send" id="send" class="btn btn-primary" onclick="return textSubmit();"></TD></TR></TABLE>

<script>
function textSubmit(str) 
if (str != "refresh") 
        var admin = "<?php echo $admin;?>";
        var session = "<?PHP echo $session;?>";
        var input = document.getElementById("input").value;
        document.getElementById("input").value = "";
        var dataString = 'admin='+ admin + '&input=' + input + '&session=' + session;

else 
        var session = "<?PHP echo $session;?>";
        var dataString = 'session=' + session;

        jQuery.ajax(
            url: "admin/chatsession.php",
            data: dataString,
            type: "POST",
            success: function(data)
                $("#adminlog").html(data);
            ,
            error: function ()
        );
    return true;



  setInterval('textSubmit("refresh")', 5000);
</script>

【参考方案1】：

使用 JQuery

<table id="scroll"><!--code--></table>
$(document).ready(function()
// check if the scroll is down
    var isScrolledDown = ($('#scroll')[0].scrollHeight - $('#scroll')[0].scrollTop <= $('#scroll')[0].offsetHeight);
    // display the message
    $('#scroll')[0].innerHTML += htmlMessage;
    // scroll down the scrollbar
    $('#scroll')[0].scrollTop = isScrolledDown ? $('#scroll')[0].scrollHeight : $('#scroll')[0].scrollTop;

或者用了解ajax和phpthis book

【讨论】：

嗨，欢迎来到 Stack Overflow。虽然始终欢迎提供有用的外部资源的链接，但也请引用您链接到的页面中的关键摘录。这样一来，如果网站出现故障或页面被（重新）移动，那么这个答案就不会变得无用。