Мои элементы списка начинаются в правильном месте, но заканчиваются переполнением div top

Question

Мои динамически сгенерированные элементы списка начинаются с нижней части div, как я хочу, но когда он поднимается до верха, он переполняет div ... и он оставляет пробел в том месте, откуда он начинался, когда переполняет верхнюю часть div ... .i использовал переполнение: прокрутка; и переполнение: авто; ни то, ни другое не работает для top of div ... тогда я где-то читал, если не было мер по высоте, которые могли бы произойти, чтобы я переключился с vh / vw на%, затем на px ..., кажется, ничего не работает ....

Недавно я посмотрел видео с YouTube по понгу и подумал, нужно ли мне обнаруживать столкновения ... но прежде чем я попробую эту дорогу, я хотел спросить ваше мнение

  ```html
  <div id="msgContainer">
    <ol id="msgList"> </ol>
  </div>
  <div id="inputContainer">
    <input id="msg" type="text">
    <input id="listBtn" type="button" value="SEND">
  </div>    


  ```css3
  #msgContainer {
        display:grid;
        position:relative;
        width:360px;
        height:468px;
        align-content:end;
        justify-content:start;
        word-break:break-all;
        overflow-y:scroll;
    }

   ```javascript
    var textMsg, createBtn, msgLists, goBackLink, dropDownMenu, x;
    textMsg = document.getElementById("msg");
    createBtn = document.getElementById("listBtn");
    msgsList = document.getElementById("msgList");
    goBackLink = document.getElementById("backHistory");
    x="";
    /* BUTTON AND FUNCTION TO CREATE AND APPEND LIST ITEMS*/
    function createLI() {//function creates list items
        //local variables
        let myLi = document.createElement("li");
        let lineBr = document.createElement("br");
        //sets list items equal to the message values 
        myLi.innerText=textMsg.value;
        //attaches the dynamic list items to predefined ordered list
        msgsList.appendChild(myLi);
        //sets the value of message box to empty after button click
        //thus emptying 
        textMsg.value ="";
        //IF THE MESSAGE IS AN EMPTY STRING IT WILL NOT SHOW LINES
        //BUT IF IT HAS CONTENT IF WILL DISPLAY MESSAGES
       /* if(x=== myLi.innerText) {
            alert("EMPTY STRING");
            myLi.style.display="none";
            return false;
        }else {
            alert("MESSAGE SENT");
            return true;
        } */    
    }
        //add click event listeners to buttons/links 
    createBtn.addEventListener("click", createLI);
    goBackLink.addEventListener("click", goBack);

Answer 1

мой друг помог мне с решением:

    /*SCROLL FIX*/
    createBtn.addEventListener("click", checkScroll);
    function checkScroll(){

    // outer div
    var msgElement = document.getElementById('msgContainer');

    // getting height of outer div
    var containerHeight = msgElement.clientHeight; // can also use 'offsetHeight' instead of 'clientHeight'

    // inner element (ol)
    var innerElement = document.getElementById('msgList');

    // getting heightof inner element
    var innerHeight = innerElement.clientHeight;

    // compare, to know if scroll is visible or not
    if(containerHeight > innerHeight ){
        msgElement.style.alignContent = "end";
    }
    else if(containerHeight <= innerHeight){
        msgElement.style.alignContent = "unset";
        // making div to auto scroll to bottom, so new chat msg always appears right at the place
        msgElement.scrollTop = msgElement.scrollHeight;

    }
}

я впервые задаю вопрос здесь ... думал, что вы, ребята, были бы более полезными ... хорошо, я рад, что я подождал всего пару дней, прежде чем начал обсуждать это со своим другом.