组元素滚动穿透的解决方案

1.如果是有遮罩层的，直接禁止父元素滚动条overflow-y: hidden;

2.如果没有遮罩层，也要动态滚动父组件，也要滚动子组件并且子组件的滚动条禁止穿透到父组件，怎么解决？

//answerFirstRef滚动限制
        answerFirstRef.value.addEventListener('touchstart', e => {
          startX = e.changedTouches[0].pageX // 存储初始触摸位置的 X 坐标
          startY = e.changedTouches[0].pageY // 存储初始触摸位置的 Y 坐标
        })
        //answerFirstRef滚动限制
        answerFirstRef.value.addEventListener('touchmove', e => {
          const deltaY = e.changedTouches[0].pageY - startY
          const deltaX = e.changedTouches[0].pageX - startX

          // 计算手指移动方向的角度
          const angle = Math.atan2(Math.abs(deltaY), Math.abs(deltaX)) * (180 / Math.PI)

          // 如果手指移动角度小于 45 度，认为是水平移动，不执行阻止行为
          if (angle < 45) {
            return
          }

          // 禁止向上滚动溢出
          if ((e.cancelable && deltaY > 0 && answerFirstRef.value.scrollTop <= 0) || answerFirstRef.value.scrollTop == null) {
            e.preventDefault()
          }

          // 禁止向下滚动溢出
          if ((e.cancelable && deltaY < 0 && answerFirstRef.value.scrollTop + answerFirstRef.value.clientHeight + 2 >= answerFirstRef.value.scrollHeight) || answerFirstRef.value.scrollTop == null) {
            e.preventDefault()
          }
        })

这是当滚动条在顶部以及在底部时候就会穿透，只要判断顶部是否触底以及底部是否触底判断，来让手指事件取消，但是如果同时出现X和Y轴都有滚动，那么就要限制X 和Y轴一起判断，当角度小于45度时候就不要限制手指事件，这样用户在滚动才不会卡住。