私はチャット システムを持っています: http://driptone.com/jony/applications/chat/index.php
リロードが発生するか、誰かが投稿するたびに、ajax はスクロールを一番下に戻します。
var height = $('#chat')[0].scrollHeight;
$('#chat').scrollTop(height);
私がやろうとしていることは次のとおりです。
ユーザーが上にスクロールすると、下にスクロールしても影響を受けません。チャットで合計メッセージ数が 30 を超える場合に機能するもの。(チャットに 30 件以上のメッセージがある場合は、カウントしませんでした。
var height = $('#chat')[0].scrollHeight;
if ($('#chat').scrollTop() > height)
{
$('#chat').scrollTop(height);
}
この方法は機能しましたが、チャットを削除すると、何らかの理由で機能しなくなりました。理由がわかりません。
なぜそれをしているのですか?私のJSコードがあります:
var earlier;
var mayscroll;
$('#chat').on('scroll', function(event) {
var element, height, scrollHeight, scrollTop;
element = $(this);
scrollTop = element.scrollTop();
scrollHeight = element.prop('scrollHeight');
height = element.height();
if (scrollTop < scrollHeight - height - 25) {
disableScroll();
}
if (scrollTop > scrollHeight - height - 10) {
return enableScroll();
}
});
$(document).ready(function() {
var canPost;
reload();
$("#login").submit(function(event) {
event.preventDefault();
$.post("ajax.php", { login : $("#guest").val() }, function(data) {
$.post("ajax.php", { send : "Has joined the chat" }, function() {
location.reload();
});
});
});
$("#load").click(function() {
earlier = true;
reloadEarlier()
$("#load").fadeOut("slow");
$("#load").html('');
});
$("#loginuser").submit(function(event) {
event.preventDefault();
$.post("ajax.php", { username : $("#user").val() }, { password : $("#pass").val() }, function(data) {
if (data == 'true')
{
$.post("ajax.php", { send : "Has joined the chat" }, function() {
location.reload();
});
}
else
{
$(".errors").html(data);
}
});
});
$(".send-message").submit(function(event) {
$("#loading").show();
event.preventDefault();
if (canPost != false) {
if ($("#message").val().length > 0)
{
$.post("ajax.php", { send : $("#message").val() }, function(data) {
canPost = false;
$(".errors").html(data);
setTimeout(function() {
canPost = true;
}, 500);
if (earlier != true)
{
reload();
} else {
reloadEarlier();
}
if ($(".error").val() != null) {
$(".error").html("");
}
$("#loading").hide();
});
$("#message").val("");
} else {
$(".error").html("Your message is too short...");
$("#loading").hide();
}
} else {
$(".error").html("Please wait 3 seconds before posting again...");
$("#loading").hide();
}
if ($(".error").val() != null) {
setTimeout(function() {
$(".error").html("");
}, 3000);
}
});
setInterval(function() {
pingServer();
checkIfNeedEarlier();
}, 5000);
});
var hold = "<span style='color: lightblue; cursor: pointer;'>Load Earlier (30 more)<br /></span>";
function checkIfNeedEarlier() {
if (earlier != true) {
$.post('ajax.php', { earlier : '1' }, function(data) {
if (data > 30) {
$("#load").html(hold);
$("#load").fadeIn("slow");
} else {
$("#load").fadeOut("slow");
$("#load").html('');
}
});
}
}
function pingServer() {
$.post("ajax.php", { ping : "true" }, function() {
if (earlier != true)
{
reload();
} else {
reloadEarlier();
}
});
}
function reload() {
$.post("ajax.php", { loadMessages : "1" }, function(data) {
$(".discussion").html(data)
var height = $('#chat')[0].scrollHeight;
if ($('#chat').scrollTop() > height)
{
$('#chat').scrollTop(height);
}
});
}
function reloadEarlier()
{
$.post("ajax.php", { loadEarlier : "1" }, function(data) {
$(".discussion").html(data);
if (mayscroll == true) {
var height = $('#chat')[0].scrollHeight;
$('#chat').scrollTop(height);
}
})
}
これは私のCSSです:
#chat,
.post-message {
background-color: #fff;
border: 1px solid rgba(0,0,0,0.14);
height: 450px;
margin: 20px auto;
overflow-y: scroll;
width: 400px;
}