为何overscroll-behavior: contain在该场景下无法生效？

问题出在你的列表容器没有被正确限制高度，导致overscroll-behavior: contain无法生效。具体来说：

• html和body没有设置明确的视口高度，使得容器的height:100%无法继承到正确的高度值
• ul本身没有被限制高度，会随内容自动撑开，滚动事件其实是作用在页面而非列表上

修改CSS如下，就能实现仅列表自身滚动的效果：

html, body{
    margin: 0px;
    height: 100vh; /* 让根元素占满视口高度 */
}
#container{
    height: 100%;
    width: 100%;
    display: flex;
}
.form{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h1{
    margin: 0px;
    padding: 0px;
}
.list{
    height: 100%;
    width: 50%;
    border-left: 2px solid black;
    overflow: hidden; /* 限制内部元素高度，不让内容超出 */
}
ul{
    height: 100%; /* 让列表填满父容器高度 */
    overflow: auto;
    overscroll-behavior: contain;
    list-style: none;
    margin: 0; /* 移除默认margin，避免滚动条异常 */
    padding: 0; /* 移除默认padding，优化布局 */
}

关键修改点说明：

• 给html和body设置height:100vh，确保所有子元素的height:100%能正确继承视口高度
• 给.list加overflow:hidden，防止ul超出容器范围
• 给ul设置height:100%，让它填满父容器，触发overflow:auto产生滚动条，此时overscroll-behavior:contain才会生效，阻止滚动事件冒泡到页面

内容的提问来源于stack exchange，提问作者Anoop Lamba