Баг скроллинга в чате (на моб.устройстве) - JavaScript, Ajax

Grasss · 01.05.2019, 01:19

Доброго времени суток. Помогите найти и устранить ошибку.
При отправке сообщения, чат скроллится в самый конец и через секунду случается скачек на 4-5 сообщения вверх и последние отправленные уже не видно. Не знаю в чем может быть причина. По хорошему, чат должен скроллится в конец к последнему сообщению и на нем фиксироваться.

С ПК вроде все нормально отображается, а вот с мобильного устройства замечаются скачки и смещение сообщений.

Прикладываю видео с багом
https://www.youtube.com/watch?v=ytq17UnTXxM

Исходники чата
https://cloud.mail.ru/public/4j3U/3k3moM4K8

index.php

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style> 
@import url('https://fonts.googleapis.com/css?family=Titillium+Web'); 
</style>
<style>
body {
    font: 15px ;
    color: #0ED095;
    text-align: center;
    padding: 35px;
    background-color:#03192A;
    font-family: 'Titillium Web', sans-serif;
}

form,p,span {
    margin: 0;
    padding: 0;
}

input {
    font: 17px arial;
}

a {
    color: #0BCBD7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#wrapper,#loginform {
    margin: 0 auto;
    padding-bottom: 25px;
    background: #1e2b35;
    width: 100%;
    border: 1px solid #142e3d;
}



#chatbox {
    font:12px calibry;
    text-align: left;
    margin: 0 auto;
    margin-bottom: 25px;
    padding: 10px;
    background: #494949;
    height: 270px;
    width: 95%;
    border: 1px solid #0AC875;
    overflow: auto;
}

#usermsg {
    width: 80%;
    border: 1px solid #ACD8F0;
}

#submit {
    width: 60px;
}



.msgln {
    margin: 0 0 2px 0;   font:12px calibry;
}
</style>

</head>
<body>

<div id="wrapper">
        
        <div id="chatbox"><?php
        if (file_exists ( "chatlog.php" ) && filesize ( "chatlog.php" ) > 0) {
            $handle = fopen ( "chatlog.php", "r" );
            $contents = fread ( $handle, filesize ( "chatlog.php" ) );
            fclose ( $handle );
            
            echo $contents;
        }
        ?></div>

        <form name="message" action="">
            <input name="usermsg" type="text" id="usermsg" size="63" /> <input
                name="submitmsg" type="submit" id="submitmsg" value="Send" />
        </form>
    </div>
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
// jQuery Document


//If user submits the form
$("#submitmsg").click(function(){
        var clientmsg = $("#usermsg").val();
        $.post("post.php", {text: clientmsg});               
        $("#usermsg").attr("value", "");
        loadLog;
    return false;
});

function loadLog(){       
    var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
    $.ajax({
        url: "chatlog.php",
        cache: false,
        success: function(html){       
            $("#chatbox").html(html); //Insert chat log into the #chatbox div   
            
            //Auto-scroll           
            var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
            if(newscrollHeight > oldscrollHeight){
                $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
            }               
          },
    });
}

setInterval (loadLog, 2500);
</script>

    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
</script>
</body>

</html>

post.php

Код:

<?php
    $text = $_POST['text'];
    
    $fp = fopen("chatlog.php", 'a');
    fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(iconv('UTF-8', 'Windows-1251', $text))."<br></div>\n");
    fclose($fp);

?>

chatlog.php

Код:

<div class='msgln'>(12:04 AM) <b></b>: Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu<br></div>
<div class='msgln'>(12:04 AM) <b></b>: Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.<br></div> 
<div class='msgln'>(12:05 AM) <b></b>: Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.<br></div>
<div class='msgln'>(12:04 AM) <b></b>: Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu<br></div> 
<div class='msgln'>(12:05 AM) <b></b>: Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.<br></div>
<div class='msgln'>(12:11 AM) <b></b>: xxxczz<br></div>

Alex11223 · 01.05.2019, 09:58

Что за -20? И какой-то сложный автоскролл, наверно ж можно например просто вызвать scrollIntoView на последнем сообщении.

ЗЫ зачем вы конвертируете utf-8 в win1251? Используйте везде utf-8.

Grasss · 01.05.2019, 12:33

Нашел его на GitHub, по функционалу полностью устраивает.
Но вот почему-то на мобильных устройствах происходит скачек сообщений, видимо из-за отсутствия фиксированной высоты блоков. Но когда ставлю фиксированную например height:50px;, то баг скроллинга пропадает. А когда убираю высоту или ставлю min-height, то все равно случается баг.

Alex11223 · 01.05.2019, 13:40

и? я ж предложил более простой вариант скролла, вот и попробуйте его.

Ну и вообще заменять все содержимое каждые 2 сек так себе идея.
Простой вариант как улучшить: добавьте запрос возвращающий время последнего сообщения и запрашивайте/заменяйте HTML только если отличается от времени последней замены.

Цитата:

Сообщение от Grasss

Нашел его

лучше не пользоваться туториалами 2009 года.

может вообще просто из-за древней версии jQuery.

Grasss · 02.05.2019, 12:52

<<Простой вариант как улучшить: добавьте запрос возвращающий время последнего сообщения и запрашивайте/заменяйте HTML только если отличается от времени последней замены>>

А можно пример кода?
Попробую его в деле.

Alex11223 · 02.05.2019, 12:59

Так сами и напишите.

01.05.2019, 09:58	#2
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	Что за -20? И какой-то сложный автоскролл, наверно ж можно например просто вызвать scrollIntoView на последнем сообщении. ЗЫ зачем вы конвертируете utf-8 в win1251? Используйте везде utf-8. Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

02.05.2019, 12:59	#6
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	Так сами и напишите. Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как закрепить обьект относительно прокрутки(скроллинга) форм	Feraset	Общие вопросы Delphi	3	27.10.2012 23:36
По выходу из потока не работают элементы скроллинга компонента dataGridView	zakaev	C# (си шарп)	2	07.09.2011 08:11
Пример скроллинга textarea	softbi	HTML и CSS	2	29.06.2011 07:23
Подобие скроллинга в паскале	druganito	Помощь студентам	2	18.05.2009 13:46
нет диска в устройстве	}{@TT@BЬ)Ч	Операционные системы общие вопросы	7	20.01.2009 20:18

01.05.2019, 12:33	#3
Grasss Пользователь Регистрация: 03.11.2017 Сообщений: 26	Нашел его на GitHub, по функционалу полностью устраивает. Но вот почему-то на мобильных устройствах происходит скачек сообщений, видимо из-за отсутствия фиксированной высоты блоков. Но когда ставлю фиксированную например height:50px;, то баг скроллинга пропадает. А когда убираю высоту или ставлю min-height, то все равно случается баг.

02.05.2019, 12:52	#5
Grasss Пользователь Регистрация: 03.11.2017 Сообщений: 26	<<Простой вариант как улучшить: добавьте запрос возвращающий время последнего сообщения и запрашивайте/заменяйте HTML только если отличается от времени последней замены>> А можно пример кода? Попробую его в деле.