Javascript 我的列表项从正确的位置开始，但最终溢出div top

我的动态生成的列表项从div的底部开始，就像我想要的一样，但是当它上升到顶部时，它会溢出div…并且一旦溢出div的顶部，它会与开始位置留下一个间隙…我使用了溢出：滚动；和溢出：自动；这两个都不适用于div的顶部…然后我在某个地方读到，如果它没有可能发生的高度测量，我从vh/vw切换到%，然后切换到px…，似乎什么都不起作用

我最近在pong上看了一段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);

---

我的一个朋友帮我解决了这个问题：

    /*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;

    }
}

---

我第一次在这里问问题……我想你们会更有帮助……我很高兴我只等了几天就开始和我的朋友讨论这个问题。

这是一个很好的解释，说明了你需要什么，但是如果没有相关的代码，我们将无法继续。。请发布您的html、css和JavaScript-否则，请注意，此帖子可能会被关闭。单击编辑链接，然后单击工具栏上的按钮，创建一个代码段，您可以在其中插入html、css和JavaScript。如果它不运行，不要担心，这就是你的问题所在。@ScottMarcus代码运行…只是做了一些意想不到的事情…我不知道如何防止它溢出顶部div@Zak我很感激…是的，我很难弄清楚stackoverflow的格式…它不允许我复制和粘贴我的代码…所以我不得不用蓝牙从手机短信发送它编辑器到我的平板电脑，然后从编辑器复制粘贴到这里…由于某些原因，无法从我的手机正确格式化…但无论如何…我将感谢您的专家意见