Question

我有一个简单的 React App codesandbox (fork)。

我使用 react-horizontal-scrolling-menu 进行导航。

所以，现在菜单滚动。锚链接工作。如果您滚动菜单，各个部分就会滚动。

但是如果你滚动浏览这些部分，菜单不会滚动，菜单的活动类也不会切换。

<ScrollMenu
            ref={this.scrollRef}
            data={menu}
            transition={+transition}
            onUpdate={this.onUpdate}
            onSelect={this.onSelect}
            selected={selected}
            translate={translate}
            alignCenter={alignCenter}
            scrollToSelected={true}
            dragging={dragging}
            clickWhenDrag={clickWhenDrag}
            wheel={wheel}
          />
        </div>
    
{list.map((category) => (
          <div
            key={category.name}
            id={`${category.name.replace(/\s+/g, "")}`}
            className="section mb-4"
          >
            <h2>
              {category.name} {selected}
            </h2>
          </div>
        ))}

问题：如何在滚动部分时添加菜单的活动类并将菜单滚动到活动类？

Answer 1

我必须实现 componentDidMount 和 componentWillUnmount 并移动滚轮事件添加/删除事件侦听器，以使您的代码和框可用。它在每次更新时都添加了一个新的轮子处理程序，很快就变得无法使用，非常滞后。

您可以使用 Intersection Observer API 来观察（间谍）部分何时进入视图并使用目标元素的 selected 属性设置 id 状态。

创建一个元素引用数组

elmentRefs = list.map(React.createRef);

创建观察者

createObservers = () => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          this.setState({ selected: entry.target.id });
        }
      });
    },
    { threshold: 1.0 } // <-- section fully in view
  );

  this.elmentRefs.forEach(({ current }) => observer.observe(current));
};

...

componentDidMount() {
  this.createObservers();

  ...
}

将引用附加到部分

{list.map((category, i) => (
  <div
    ref={this.elmentRefs[i]} // <-- attach element refs
    key={category.name}
    id={`${category.name.replace(/\s+/g, "")}`}
    className="section mb-4"
  >
    <h2>
      {category.name} {selected}
    </h2>
  </div>
))}

按部分反应水平滚动菜单

1 个答案: