react step组件滑动效果

主要涉及3个知识点吧

• useRef 因为react中操作DOM需要使用 ref 关联
• window.scrollTo / Element.scrollIntoView() 方法的使用
• useEffect 当步骤变化时需要做滑动操作

1. 使用 useRef 设置好要滑动到的元素

  const curEleRef = useRef(null);

  return (
    <div ref={curEleRef}>
    ...
    </div>
  )

2. 尝试使用 window.scrollTo 方法解决但是滑动定位并不准， 上一步/下一步操作的滑动方向不同将导致显示的内容left位置计算方法不同，需要获取元素的宽度来计算并做方向判断。 使用scrollIntoView(scrollIntoViewOptions) 这个就非常爽了，上边的两个都不用管了，可以按要求来滚动，具体参数值可以自己测试下，如block应该用 start 还是 end.

  const curEleRef = useRef(null);
  // const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop)  
  useEffect(() => {
    // const timerId = setTimeout(() => {
      // const div = curEleRef.current;
      // const rect = div.getBoundingClientRect();
      // console.log(rect.width); // "874"
      // console.log(rect.height); // "18"
    
    // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
    curEleRef.current.scrollIntoView({
      behavior: 'smooth',
      block: 'end',
      inline: 'start',
    });
    // window.scrollTo(curEleRef.current.offsetLeft + rect.width);
    // window.scrollTo({
    //   left: curEleRef.current.offsetLeft + rect.width,
    //   behavior: 'smooth',
    // });
    // });

    // cleanup
    // return () => {
    //   clearTimeout(timerId);
    // };
  }, [stepNum]);

3. useEffect 这个就自己看文档吧