Баг при прокрутке страницы через JS

228

29 сентября 2017, 20:11

Делаю так:

a = 1;
while(true){
    if(!document.getElementById(a)){
        var last = a-1;
        window.scrollTo(0, document.getElementById(a-1).offsetTop);
        break;
    }
    a++;
}

И прокручивается нормально, делаю так:

a = 1;
while(true){
    if(!document.getElementById(a)){
        var last = a-1;
        window.scrollTo(0, document.getElementById(last).offsetTop);
        break;
    }
    a++;
}

И уже прокручивается как надо а потом чуть выше, пробовал сначала как 1 вариант, потом как 2 отдельно вне цикла все равно не хочет он через переменную last как надо прокручивать, я делал цикл чтобы получить последнее сообщение и к нему идти уже, и буду идти еще не раз дальше, почему же last != a-1???

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>чат</title>
    <script src="jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <div id="messages"></div>
        <div id="chat">
            <input type="text"></input>
            <button id="send">&nbsp;</button>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

CSS:

#messages{
    background-color: white;
    box-shadow: 0 1px 0 0 #d7d8db, 0 0 0 1px #e3e4e8;
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
    padding: 15px;
    padding-bottom: 120px;
}
#chat{
    background-color: white;
    position: fixed;
    bottom: 0px;
    width: 40vw;
    height: 100px;
}
#chat input{
    height: 100px;
    width: 35vw;
}
#container{
    margin-left: 30vw;
    width: 40vw;
}
#send{
    width: 5vw;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('');
}

JS:

var text = '"><div class="col-1"><img src=""></div><div class="col-11 
text">Тестовое сообщение длиною не более 1000 символов</div></div><hr>';
var a = 0;
while(a<50){
    $('#messages').html($('#messages').html()+'<div class="row" id="'+(a+1)+text);
    a++;
}
a = 1;
while(true){
    if(!document.getElementById(a)){
        var last = a-1;
        window.scrollTo(0, document.getElementById(a-1).offsetTop);
        break;
    }
    a++;
}