滚动穿透，滚动容器嵌套时，子容器滚动到底部无法带动父容器的问题

场景

当外部容器滚动，内部多个子容器也都有滚动时，若滚动子容器到底部 不会带动父容器一起滚

解决

• 子滚动容器增加事件监听和处理

<div class="outer-list-container">
    <div v-for="sect in list">
        <div>{{sect.title}}</div>
        <div class="child-list" v-for="child in sect.childList"            
               @touchstart="handleMaterialListTouchStart($event)"
               @touchmove="handleMaterialListTouchMove($event)">
            {{child.name}}
        </div>
    </div>
</div>

const handleMaterialListTouchStart = (event) => {
  const materialListEl = event.currentTarget
  materialListEl._lastTouchY = event.touches[0].clientY
}

const handleMaterialListTouchMove = (event) => {
  const materialListEl = event.currentTarget
  const thirdCategoryContainer = document.querySelector('.outer-list-container')
  if (!materialListEl || !thirdCategoryContainer) return

  const { scrollTop, scrollHeight, clientHeight } = materialListEl
  const touch = event.touches[0]
  const deltaY = touch.clientY - (materialListEl._lastTouchY || touch.clientY)
  materialListEl._lastTouchY = touch.clientY

  const isAtTop = scrollTop <= 0
  const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1

  if ((deltaY > 0 && isAtTop) || (deltaY < 0 && isAtBottom)) {
    thirdCategoryContainer.scrollTop -= deltaY
  }
}