jquery - React 中的软滚动顶升
问题描述
我需要帮助来实现类似https://www.apple.com/mac-mini/上的交互,其中有一个恒定的导航滑块,并且当用户向下滚动时,它周围的文本会发生变化。这是我目前的进展 - http://mukit.io/scroll-test。
这只是一个演示,实际站点在 React 中,我在使用 JQuery/React 时遇到了问题,并且让体验与他们在这里一样无缝。目前,我正在尝试更改 z 轴,但结果不是很好。
解决方案
您必须根据目标 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,它完全符合您的要求。