H5实现定位到指定dom节点

需求

H5页面是多个商品列表循环遍历生成，需要根据链接传参定位到指定商品

方案

使用 Element.scrollIntoView()

// 数据结构
const goods = [
    {
        good_id: xxx,
        good_name: xxx,
        good_url: xxxx,
        ...
    }
]
// 以react为例
// dom
goods.map(item => {
    return (
        <div id={item.good_id}>
            <img src={item.good_url} />
            <p>{item.good_name}</p>
        </div>
    )
});

// js部分
import { useSearchParams } from 'react-router-dom';

const [searchParams] = useSearchParams();
const good_id = searchParams.get("good_id");

useEffect(() => {
    const anchorElement = document.getElementById(goods_id);
    if (anchorElement) {
      anchorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}, [])

补充

上述方式可以实现滚动，但大概率会存在bug，原因是数据一般是接口请求返回，且图片区域高度多数情况下是自动撑开的，所以异步情况下会出现滚动异常，不会正确的滚动到期望dom节点

// 解决方案
1. 在请求数据响应后再进行滚动操作，在此之前使用loading避免引起用户体验问题  
2. 请求完数据也尽量多loading 1s后再执行，保证图片也渲染完毕页面不会再变动后执行滚动可保证效果正常