通过JS动态添加HTML后页面溢出无滚动条问题求助

核心滚动问题原因及修复 #

• ul的fixed定位导致页面无法滚动：你的CSS中给ul设置了position: fixed，fixed定位的元素会完全脱离文档流，不参与页面高度计算。当往ul内添加大量内容时，页面总高度不会被撑开，自然不会触发滚动条。
  修复：移除ul的position: fixed；如果需要固定区域，改用position: sticky，或者给ul设置固定高度+overflow-y: auto，让ul自身出现滚动条。

其他影响布局的CSS问题 #

• 缺少单位导致样式失效：il、#deleteGrup等选择器中的width、margin属性未加单位（如px），浏览器无法正确解析，会引发布局混乱，间接影响滚动逻辑。
  修复：给数值补充单位，示例：

  il {
      display: inline-block;
      width: 220px;
      margin: 20px;
  }
  #deleteGrup {
      width: 20px;
      height: 20px;
      margin: 1px;
  }
  

JavaScript代码中的错误（不直接影响滚动，但会导致功能异常） #

• 集合元素绑定事件错误：document.getElementsByClassName("grup")返回的是元素集合，不能直接调用addEventListener，需循环遍历绑定；且页面初始化时可能无.grup元素，这行代码会直接报错。
• ID大小写不一致：getElementById("allgrup")与document.getElementById("allGrup")大小写不匹配，会导致无法找到目标容器，内容无法正确添加。
• 子元素数量统计错误：document.getElementsByTagName('div').length统计的是页面所有div数量，而非目标容器的子元素数，应改为element.children.length。
• 自定义标签不符合规范：你创建的<il>标签应为标准列表项标签<li>，自定义标签虽能被浏览器解析，但可能引发布局异常。

修复后的示例代码片段 #

CSS调整

body {
    background-color: grey;
}

/* 移除fixed定位，按需调整 */
ul {
    /* position: fixed; */
    padding-left: 0;
}

li { /* 替换自定义il为标准li标签 */
    display: inline-block;
    width: 220px;
    margin: 20px;
    background: white;
    padding: 10px;
}

label {
    white-space: pre-wrap;
}

#deleteGrup {
    width: 20px;
    height: 20px;
    margin: 1px;
}

#addGrup {
    padding: 16px 32px;
    font-size: 16px;
    margin: 4px 2px;
    left: 90%;
    position: absolute;
}

button {
    display: inline-block;
    color: black;
    text-align: center;
    cursor: pointer;
}

button:hover {
    background-color: green;
    color: white;
}

JavaScript调整

document.getElementById("addGrup").addEventListener("click", addGrup, false);

function deleteGrup() {
    event.target.parentElement.remove();
}

function addGrup() {
    var element = document.getElementById("allGrup"); // 统一ID大小写
    var numberOfChildren = element.children.length; // 统计目标容器子元素数量

    let li = document.createElement('li'); // 使用标准li标签
    li.className = 'grup';
    li.id = 'grup' + numberOfChildren;

    let inputLlista = document.createElement('input');
    inputLlista.type = 'text';
    li.appendChild(inputLlista);

    let deleteButton = document.createElement('button');
    deleteButton.id = 'deleteGrup';
    deleteButton.textContent = 'x';
    li.appendChild(deleteButton);

    let labelLlista = document.createElement('label');
    labelLlista.textContent = "heoiahñskldjnskljdn askldjn aslkjdnlaksjnd";
    li.appendChild(labelLlista);

    deleteButton.addEventListener("click", deleteGrup, false);
    element.appendChild(li);
}

内容的提问来源于stack exchange，提问作者max barcon