gpt4 book ai didi

javascript - 滚动条的脚本错误

转载 作者:行者123 更新时间:2023-11-30 14:56:46 24 4
gpt4 key购买 nike

我有一个生成随机数的脚本。我想添加新生成的号码,滚动条应该保持在底部,以便密切关注新生成的号码。每次。但是滚动条保持在我移动它的位置(可以在中间或顶部)和新的编号。继续生成,滚动条保持在原位。

function fetchChat() { // 30% of chance of having new message
if (Math.random() <= 0.3) {
$("#messages").append("<div>" + "Random message " + Math.random() + "</div>");

// Scroll to bottom if you are at bottom, with tolerance of 50px if ($(window).scrollTop() + $(window).height() > $(document).height() - 50) {
scrollToBottom();
}
}


function sendMessage(txt) {
$("#messages").append("<div>" + txt + "</div>");
scrollToBottom();
}

function scrollToBottom() {
$(window).scrollTop(1e10); // Lazy hack
}

setInterval(function() {
fetchChat();
}, 500);

$("#input").keydown(function(e) {
if (e.keyCode == 13) {
sendMessage($("#input").val());
$("#input").val("");
}
});
<title>Live Table Data Edit</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<h3 align="center">You Are : Unknown</h3><br />
<div id="live_data"></div>
</div>
<div id="messages" style=" border: 1px solid #ccc;
width: 250px;
height: 210px;
padding: 10px;
overflow-y:scroll;
"></div>
<input id="input" type="text" />

最佳答案

您已经连续几天问这个问题了,请检查是否符合您的要求。

function fetchChat() { // 30% of chance of having new message
if (Math.random() <= 0.3) {
$("#messages").append("<div>" + "Random message " + Math.random() + "</div>");
scrollToBottom(); // Always scroll to bottom when new number arrived
}
}

function sendMessage(txt) {
$("#messages").append("<div>" + txt + "</div>");
scrollToBottom();
}

function scrollToBottom() {
$("#messages").scrollTop(1e10); // Lazy hack
}

setInterval(function() {
fetchChat();
}, 500);

$("#input").keydown(function(e) {
if (e.keyCode == 13) {
sendMessage($("#input").val());
$("#input").val("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<br/><br/><br/>
<div class="table-responsive">
<h3 align="center">You Are: Unknown</h3><br/>
<div id="live_data"></div>
</div>
<div id="messages" style="border: 1px solid #ccc; width: 250px; height: 210px; padding: 10px; overflow-y: scroll;"></div>
<input id="input" type="text"/>
</div>

关于javascript - 滚动条的脚本错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47130816/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com