按部分反应水平滚动菜单答案

【问题标题】：React horizontal scrolling menu by sections按部分反应水平滚动菜单
【发布时间】：2021-07-31 06:46:20
【问题描述】：

我有一个简单的 react 应用 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>
        ))}

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

创建一个元素引用数组

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>
))}

【讨论】：