Reactjs scrolIntoView在react js中行为平稳，在手机中不工作

我正在使用react的REF创建平滑的scrollIntoView。在台式计算机的浏览器中，它按预期工作。但是，当我使用移动浏览器e.x Safari打开它时，它会滚动到我想要的部分，但并不平滑。你能帮我解决这个问题吗

我的代码：

class BrandView extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
  }

  ON_CLICK_ALPHABETIC_ITEM = (index: string) => () => {
    this.refs[index].scrollIntoView({ block: "start", behavior: "smooth" });
  };

  render() {
    const { brandList, brandSortedByAlphabetic, loading } = this.props;

    return (
      <div>
        <AlphabeticBar {...{ brandSortedByAlphabetic }} onClickItem={this.ON_CLICK_ALPHABETIC_ITEM} />
        {brandList.brandList.map((item, index) => (
          <div className="brandItem" key={index} ref={index}>
            <div className="brandInfo">
              <div>
                <img alt="brand-logo" src={`${mediaUrl}/${item.image}`} />
              </div>
              <div>
                <div className="brandTitle">
                  <Link to={"/brand/" + item.brand_id}>
                    <label>{item.brand_name}</label>
                  </Link>
                </div>
                <div className="brandDescription">
                  <label>{item.short_bio}</label>
                </div>
              </div>
            </div>
            <div className="products">
              {item.products.map((product_item, product_index) => (
                <div className="product" key={product_index}>
                  <Link
                    to={
                      product_index === item.products.length - 1 && item.items > 0 ? "/brand/" + item.brand_id : "/product/" + product_item.product_id
                    }>
                    {product_index === item.products.length - 1 && item.items > 0 ? (
                      <div>
                        <div className="overlay-div">
                          <p className="shop-all">SHOP ALL</p>
                          <p className="item-number">{item.items} items</p>
                        </div>
                        <img alt="brand-products" src={product_item.image} />
                      </div>
                    ) : (
                      <img alt="brand-products" src={product_item.image} />
                    )}
                  </Link>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    );
  }
}

---

也许只需使用一个能够在手机和桌面浏览器中处理所有这些内容的库，如react scroll：

---

如果您不想使用第三方库，请共享代码的相关部分，以便人们可以看到您迄今为止所做的工作。

如果您愿意共享代码的相关部分，这将非常有用。@MartinReicheI添加：DI添加到此问题：d