iOS移动端div阻止scroll-chaining滚动链问题技术求助

在iOS移动端，垂直滚动中间的.flex-items容器时，滚动到顶部/底部后无法触发页面的滚动链（scroll-chaining），仅偶尔在回弹后二次滑动能不稳定触发。已尝试调整高度、overflow属性、overscroll-behavior、-webkit-overflow-scrolling:auto等方法，均未解决。

方案1：调整滚动行为属性并优化页面滚动基础样式 #

给页面根元素和滚动容器添加正确的滚动行为配置，强制WebKit处理滚动链：

/* 确保页面根元素支持iOS弹性滚动 */
html, body {
  height: 100%;
  margin: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 配置中间滚动容器的滚动行为 */
.flex-items:nth-child(2) {
  /* 保留原有样式 */
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

touch-action: pan-y指定容器仅处理垂直滚动，帮助WebKit正确识别滚动边界并传递事件到页面；-webkit-overflow-scrolling: touch开启iOS弹性滚动，配合overscroll-behavior-y: auto确保滚动链正常触发。

方案2：通过JS监听滚动边界手动触发页面滚动 #

若方案1无效，可通过触摸事件监听，在容器滚动到边界时手动触发页面滚动：

const scrollContainer = document.querySelector('.flex-items:nth-child(2)');

scrollContainer.addEventListener('touchmove', function(e) {
  const scrollTop = scrollContainer.scrollTop;
  const scrollHeight = scrollContainer.scrollHeight;
  const clientHeight = scrollContainer.clientHeight;
  
  // 判断是否滚动至容器边界并尝试继续滚动页面
  const isScrollingBeyondTop = scrollTop <= 0 && e.targetTouches[0].clientY > e.changedTouches[0].clientY;
  const isScrollingBeyondBottom = (scrollTop + clientHeight) >= scrollHeight && e.targetTouches[0].clientY < e.changedTouches[0].clientY;
  
  if (isScrollingBeyondTop || isScrollingBeyondBottom) {
    e.preventDefault();
    // 计算滚动偏移量并触发页面滚动
    const deltaY = e.changedTouches[0].clientY - e.targetTouches[0].clientY;
    window.scrollBy(0, deltaY);
  }
}, { passive: false });

注意：passive: false是必要配置，需通过e.preventDefault()阻止容器的默认滚动行为，避免与页面滚动冲突。

方案3：简化滚动层级（业务允许时） #

若无需中间容器单独滚动，可移除其固定高度和滚动属性，让内容随页面整体滚动，从根源避免滚动链问题：

.flex-items:nth-child(2) {
  height: auto; /* 替换原有固定高度 */
  overflow: visible; /* 移除auto属性 */
}

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