React 中的软滚动顶升

【问题标题】：Soft-Scroll jacking in ReactReact 中的软滚动顶升
【发布时间】：2019-01-03 15:38:15
【问题描述】：

我需要帮助来实现类似于https://www.apple.com/mac-mini/ 上的交互，其中有一个恒定的导航滑块，并且当用户向下滚动时，它周围的文本会发生变化。这是我目前的进度 - http://mukit.io/scroll-test。

这只是一个演示，实际站点在 React 中，我在使用 JQuery/React 时遇到了问题，并且让体验与他们在这里所做的一样无缝。目前，我正在尝试更改 z 轴，但结果不是很好。

【问题讨论】：

您遇到了什么问题？
@AlexW 我不知道实现这种行为的最佳策略是什么。

标签： jquery css reactjs frontend

【解决方案1】：

您必须根据目标 div Y 位置与滚动文档的高度来更新活动项目。这可以通过类似于以下方式完成：

import React from 'react';

let lastScrollY = 0;
let ticking = false;

class App extends React.Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  nav = React.createRef();

  handleScroll = () => {
    lastScrollY = window.scrollY;

    if (!ticking) {
      window.requestAnimationFrame(() => {
        this.nav.current.style.top = `${lastScrollY}px`;
        ticking = false;
      });

      ticking = true;
    }
  };

  render() {
    return (
      <div>
        <nav ref={this.nav}>
        </nav>
      <div>
    );
  }
}

您也可以试试https://github.com/makotot/react-scrollspy，它完全符合您的要求。

【讨论】：