从 antDesign 来窥探移动端“滚动穿透”行为

import { useRef } from 'react'

const MIN_DISTANCE = 10

type Direction = '' | 'vertical' | 'horizontal'

function getDirection(x: number, y: number) {
  if (x > y && x > MIN_DISTANCE) {
    return 'horizontal'
  }
  if (y > x && y > MIN_DISTANCE) {
    return 'vertical'
  }
  return ''
}

export function useTouch() {
  const startX = useRef(0)
  const startY = useRef(0)
  const deltaX = useRef(0)
  const deltaY = useRef(0)
  const offsetX = useRef(0)
  const offsetY = useRef(0)
  const direction = useRef<Direction>('')

  const isVertical = () => direction.current === 'vertical'
  const isHorizontal = () => direction.current === 'horizontal'

  const reset = () => {
    deltaX.current = 0
    deltaY.current = 0
    offsetX.current = 0
    offsetY.current = 0
    direction.current = ''
  }

  const start = ((event: TouchEvent) => {
    reset()
    startX.current = event.touches[0].clientX
    startY.current = event.touches[0].clientY
  }) as EventListener

  const move = ((event: TouchEvent) => {
    const touch = event.touches[0]
    // Fix: Safari back will set clientX to negative number
    deltaX.current = touch.clientX < 0 ? 0 : touch.clientX - startX.current
    deltaY.current = touch.clientY - startY.current
    offsetX.current = Math.abs(deltaX.current)
    offsetY.current = Math.abs(deltaY.current)

    if (!direction.current) {
      direction.current = getDirection(offsetX.current, offsetY.current)
    }
  }) as EventListener

  return {
    move,
    start,
    reset,
    startX,
    startY,
    deltaX,
    deltaY,
    offsetX,
    offsetY,
    direction,
    isVertical,
    isHorizontal,
  }
}

// canUseDom 方法是对于是否可以使用 Dom 情况下的判断,主要为了甄别（ Server Side Render ）
import { canUseDom } from './can-use-dom'

type ScrollElement = HTMLElement | Window

const defaultRoot = canUseDom ? window : undefined

const overflowStylePatterns = ['scroll', 'auto', 'overlay']

function isElement(node: Element) {
  const ELEMENT_NODE_TYPE = 1
  return node.nodeType === ELEMENT_NODE_TYPE
}
export function getScrollParent(
  el: Element,
  root: ScrollElement | null | undefined = defaultRoot
): Window | Element | null | undefined {
  let node = el

  while (node && node !== root && isElement(node)) {
    if (node === document.body) {
      return root
    }
    const { overflowY } = window.getComputedStyle(node)
    if (
      overflowStylePatterns.includes(overflowY) &&
      node.scrollHeight > node.clientHeight
    ) {
      return node
    }
    node = node.parentNode as Element
  }
  return root
}

import { useEffect, useRef } from 'react';
import './App.css';
import { getScrollParent } from './hooks/getScrollParent';

function App() {
  const ref = useRef<HTMLDivElement>(null);

  const onTouchMove = (event: TouchEvent) => {
    const el = getScrollParent(event.target as Element, ref.current);
    console.log(el, 'el'); // child-1
  };

  useEffect(() => {
    document.addEventListener('touchmove', onTouchMove);
  }, []);

  return (
    <>
      <div ref={ref} className="parent">
        <div
          className="child-1"
          style={{
            height: '300px',
            overflowY: 'auto',
          }}
        >
          <div
            style={{
              height: '600px',
            }}
          >
            This is child-2
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

import { useTouch } from './use-touch'
import { useEffect, RefObject } from 'react'
import { getScrollParent } from './get-scroll-parent'
import { supportsPassive } from './supports-passive'

let totalLockCount = 0

const BODY_LOCK_CLASS = 'adm-overflow-hidden'

function getScrollableElement(el: HTMLElement | null) {
  let current = el?.parentElement

  while (current) {
    if (current.clientHeight < current.scrollHeight) {
      return current
    }

    current = current.parentElement
  }

  return null
}

export function useLockScroll(
  rootRef: RefObject<HTMLElement>,
  shouldLock: boolean | 'strict'
) {
  const touch = useTouch()

  /**
   * 当手指拖动时
   * @param event 
   * @returns 
   */
  const onTouchMove = (event: TouchEvent) => {
    touch.move(event)

    // 获取拖动方向
    // 如果 deltaY 大于0，拖动的当前Y轴位置大于起始位置即从下往上拖动将 direction 变为 '10'，否则则会 `01`
    const direction = touch.deltaY.current > 0 ? '10' : '01'

    // 我们在上边提到过，找到范围内可滚动的元素
    const el = getScrollParent(
      event.target as Element,
      rootRef.current
    ) as HTMLElement
    if (!el) return

    // This has perf cost but we have to compatible with iOS 12
    if (shouldLock === 'strict') {
      const scrollableParent = getScrollableElement(event.target as HTMLElement)
      if (
        scrollableParent === document.body ||
        scrollableParent === document.documentElement
      ) {
        event.preventDefault()
        return
      }
    }

    // 获取可滚动元素的位置属性
    const { scrollHeight, clientHeight, offsetHeight, scrollTop } = el

    // 定义初始 status 
    let status = '11'

    if (scrollTop === 0) {
      // 滚动条在顶部，表示还未滚动
      // 滚动条在顶部时，需要判断是当前元素不可以滚动还是可以滚动但是未进行任何滚动

      // 当 offsetHeight >= scrollHeight 表示当前元素不可滚动，此时将 status 变为 00,
      // 否则表示当前元素可滚动但滚动条在顶部，将status变为 01
      status = offsetHeight >= scrollHeight ? '00' : '01'
    } else if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
      // 滚动条已经到达底部（表示已经滚动到底），将 status 变为 '10'
      status = '10'
    }

    // 1. 完成上述的判断后，如果 status === 11 表示当前元素可滚动并且滚动条不在顶部也不在底部（即在中间），表示 touchMove 事件不应该阻止元素滚动（当前滚动为正常现象）

    // 2. 同时 touch.isVertical() 明确确保是垂直方向的拖动

    // 3. parseInt(status, 2)，当 status 不为 11 时，分为以下三种情况分别代表：
    
      // 3.1 status 00 表示区域内未寻找到任何可滚动元素
      // 3.2 status 01 表示寻找到可滚动元素，当前元素为滚动条在顶部
      // 3.3 status 10 表示寻找到可滚动元素，当前元素滚动条在底部 
    // 自然 parseInt(status, 2) &amp; parseInt(direction, 2) 这里使用了二进制的方式，

      // 3.4 当 status 为 00 时， 0 &amp; 任何数都是 0.自然 !(parseInt(status, 2) &amp; parseInt(direction, 2)) 会变为 true （对应 3.1 情况），需要阻止意外的滚动行为。

      // 3.5 当 status 为 01 时（对应 3.2 滚动条在顶部），此时当用户从下往上拖动时，需要阻止意外的滚动行为发生。否则，则不需要阻止正常滚动。 自然 status === '01' ，direction === 10（从下往上拖动），!(parseInt(status, 2) &amp; parseInt(direction, 2)) 为 true 需要进行阻止默认滚动行为。(进制上 1 &amp; 1 为 1 ，1 &amp; 2 为 0)

      // 3.6 根据 3.5 的情况，当 status 为 10 (对应 3.3)滚动到达底部，自然对于从上往下拖动时 direction 为 01 时也应该阻止，所以 (2&amp;1 = 0) 自然 !(parseInt(status, 2) &amp; parseInt(direction, 2)) 为 true，同样会进入 if 语句阻止意外滚动。
      
    if (
      status !== '11' &amp;&amp;
      touch.isVertical() &amp;&amp;
      !(parseInt(status, 2) &amp; parseInt(direction, 2))
    ) {
      if (event.cancelable) {
        event.preventDefault()
      }
    }
  }

  /**
   * 锁定方法
   * 1. 添加 touchstart 和 touchmove 事件监听
   * 2. 根据 totalLockCount，当 hook 运行时为 body 添加 overflow hidden 的样式类名称
   */ 
  const lock = () => {
    document.addEventListener('touchstart', touch.start)
    document.addEventListener(
      'touchmove',
      onTouchMove,
      supportsPassive ? { passive: false } : false
    )

    if (!totalLockCount) {
      document.body.classList.add(BODY_LOCK_CLASS)
    }

    totalLockCount++
  }

  /**
   * 组件销毁时移除事件监听方法，以及清空 body 上的 overflow hidden 的类名
   */
  const unlock = () => {
    if (totalLockCount) {
      document.removeEventListener('touchstart', touch.start)
      document.removeEventListener('touchmove', onTouchMove)

      totalLockCount--

      if (!totalLockCount) {
        document.body.classList.remove(BODY_LOCK_CLASS)
      }
    }
  }

  useEffect(() => {
    // 如果传入 shouldLock 表示需要防止意外滚动
    if (shouldLock) {
      lock()
      return () => {
        unlock()
      }
    }
  }, [shouldLock])
}