Question

我正在使用react的引用在平滑的scrollIntoView上工作。在台式计算机的浏览器中，它可以正常工作。但是，当我使用移动浏览器（例如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>
    );
  }
}

Answer 1

也许只是使用一个能够处理移动和台式机浏览器（如react-scroll：https://www.npmjs.com/package/react-scroll

）中的所有内容的库

如果您不想使用第三方库，请共享代码的相关部分，以便人们可以实际看到您到目前为止所做的事情。

行为流畅的scrolIntoView在React js中无法在移动设备中工作

1 个答案: