Question

我需要实现https://www.apple.com/mac-mini/上的交互的帮助，该交互中有一个恒定的导航滑块，并且随着用户向下滚动而使周围的文本移动。这是我当前的进度-http://mukit.io/scroll-test。

这只是一个演示，实际站点在React中，我在使用JQuery / React时遇到了麻烦，并且无法像在这里一样使体验变得无缝。目前，我正在更改z轴，但效果并不理想。

Answer 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来满足您的需求。

React中的软滚动顶升

1 个答案: