Nextjs 滚动到顶部按钮，无法获取滚动位置

Question

正在尝试实现“到达顶部”按钮，但它似乎没有按预期工作。我想我得到了正确的代码和值，但我的设置不正确。我有以下结构，在我的 index.tsc 中我有一个包含此代码的 Base 组件

const Base = () => {
  const [showButton, setShowButton] = useState(false);

  const handleScroll = () => {
    if (window.scrollY > 300) {
      setShowButton(true);
    } else {
      setShowButton(false);
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, true);
    return () => window.removeEventListener('scroll', handleScroll, true);
  });

  // This function will scroll the window to the top
  const scrollToTop = () => {
    window.scrollTo(0, 0);
  };

  return (
    <div className="antialiased text-gray-600 h-screen w-screen flex flex-col overflow-y-auto">

scrollY returns 设备的高度，而不是滚动位置。

const Index = () => <Base />;

尝试使用 document.body 并使用 scrollYOffset 并且它们都是 returns 相同的东西

Answer 1

务必检查 UI- window 或组件中实际滚动的内容。您添加了 overflow-y-auto 类名，很可能是您的 div 滚动组件。

添加了一个非常基本的片段，其中 window 正在滚动，尝试滚动它。

class App extends React.Component{
 componentDidMount(){
  window.addEventListener("scroll",()=>console.log(window.scrollY))
 }
 render(){
    return(<div>
    {[1,2,3,4,5,6,7,8,9].map(i=>(
      <div style={{height:"200px",borderBottom:"1px solid"}}>{i}</div>
      ))}
    </div>)
  }
}
  


ReactDOM.render(
  <App/>,
  document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如果它是组件滚动：

const handleScroll = (e) => {
  if((e.scrollHeight-(e.scrollTop+e.clientHeight))>300){
     setShowButton(true);
    }
  else setShowButton(false);
}

Nextjs 滚动到顶部按钮，无法获取滚动位置

Nextjs scroll to top button, cannot get scroll position

browser

typescript

reactjs

next.js