NextJS跟踪滚动位置。window.ScrollY始终等于0
Next.js是一个流行的React框架，用于构建服务器渲染的React应用程序。它提供了一种简单的方式来创建具有服务器渲染功能的React应用程序，并且具有许多有用的特性和功能。
关于Next.js跟踪滚动位置的问题，window.scrollY始终等于0可能是因为以下几个原因：
- 组件未正确绑定滚动事件：在Next.js中，可以使用React的useEffect钩子来绑定滚动事件。确保在组件中正确地使用useEffect来监听滚动事件，并在事件处理程序中更新滚动位置。
- 组件未正确处理滚动事件：在滚动事件处理程序中，可以使用window.scrollY来获取滚动位置。确保在处理滚动事件时正确地使用window.scrollY，并将其存储在组件的状态中。
- 组件未正确渲染滚动内容：如果组件没有正确地渲染滚动内容，那么滚动位置可能始终为0。确保在组件中正确地渲染滚动内容，并为其设置适当的高度和样式。
总结起来，要解决window.scrollY始终等于0的问题，需要正确绑定滚动事件、正确处理滚动事件并更新滚动位置，并确保正确渲染滚动内容。
关于Next.js的更多信息和相关产品，你可以参考腾讯云的Next.js产品介绍页面：Next.js产品介绍。
相关·内容
3回答
useEffect触发一切
、、、、
嗨，我只是想了解一下Next.JS项目中的钩子。已经实现了一个useEffect来侦听滚动行为，目的是在一个标题中显示不同的内容，就是页面被滚动。
const [ scrollY, setScrollY ] = useState(0);
useEffect(() => {
const handleScroll = () => {
setScrollY(window.scrollY);
};
handleScroll();
window.addEventListener(
浏览 4提问于2022-02-18得票数 0
2回答
我有一个页面，我试图修复，以便保持滚动位置时，用户按下后退按钮(浏览器)。假设我有一个名为list的组件，其中我向用户展示了一些产品。要查看所有产品，用户可以向下滚动list组件。当用户单击某个产品时，应用程序会将用户重定向到详图构件。然后，当用户尝试返回列表时，单击浏览器的后退按钮，列表组件将呈现，并且似乎会自动滚动到顶部。 据我所知，按下浏览器的后退按钮会触发window.history.back()操作，其他事情都不会发生。 作为解决方案，我在应用程序上下文中实现了一个变量，用于保存scrollY值，然后在我试图呈现的组件(列表组件)的componentWillMount (或useE
浏览 76提问于2021-09-06得票数 2
回答已采纳
这是一个关于如何在React中最好地产生视差效果的一般性问题！
我想根据滚动位置直接更新元素的位置。目标是让元素看起来是固定的。我尝试了一些不同的方法，但在Mac上的Safari，有时是Chrome，以及一些设备上，总是遇到断断续续/闪烁的问题。
我已经尝试过修复body和root div scroll (为了消除一些浏览器的弹性效果)，但是同样的问题。我也尝试过将translateZ(0)添加到活动3d渲染中，但也出现了同样的问题。
这是由React更新组件的频率方面的一些机制造成的，还是浏览器的问题？
有没有更好的方法来创造这种效果？
import React, { useState, u
浏览 11提问于2019-08-04得票数 5
我的目标是根据用户的滚动位置应用不同的className。如果用户的滚动位置大于0，我需要更改导航栏的背景颜色。我想出了一个在所有情况下都有效的解决方案，除了如果用户加载一个页面并且初始滚动位置不是0(滚动然后重新加载页面)的情况。
我所做的是创建了一个自定义钩子，它看起来像这样：
import { useState, useEffect } from 'react';
export default () => {
const [scrollPosition, setScrollPosition] = useState(
typeof window !==
浏览 12提问于2019-07-27得票数 3
4回答
如何正确地将右/左属性放置到react的组件样式对象中？
const [pos, setPos] = useState(null);
useEffect(()=>{
if(someCondition){setPos('left')}
else{setPos('right')}
})
return (
<div style={{`${pos}:0`}} />
)
我上面的解决方案行不通。我收到字符串和风格，我需要对象道具。你能帮忙吗？
浏览 6提问于2020-07-31得票数 0
回答已采纳
这可能是非常具体，但我要拉我的头发超过一个星期，所以我必须问。
*编辑:我重新制作了这个bug (?)在codesandbox中，您可以自己检查它： (按钮只是将类添加/移除到视差包装组件中，以方便地显示差异)。
* edit2:我认为这与以下几点有关:在App.js中，有两个组件，Nav组件和ParaWrapper组件。我相信，因为我给ParaWrapper的高度是100 of，所以Nav在技术上已经没有剩余的高度了。我仍然可以在元素检查器中看到Nav，如果我手动添加淡入类，它将按预期工作。也许这是某人解开这个谜语的线索？
情境:反应钩不起作用。我的页面包含一个视差(scss )英雄部分
浏览 3提问于2022-01-21得票数 0
1回答
这是上的一个扩展，询问如何防止在按状态更改(排序状态)重新呈现后滚动到顶部。
我用useState和useEffect编写了自动排序表。
每3秒从两个不同状态(A和B状态)的API获取随机数。
然后按状态标注为表，排序为A-B。
但是，在每次重新渲染时，窗口都会滚动到顶部。
问题是，我怎样才能防止滚动到顶端？
关于前面的问题，我尝试了如下所示的useLayoutEffect。
useEffect(() => {
const updatePosition = () => {
setCurrentScrollY(window.scrollY);
};
浏览 5提问于2022-02-01得票数 3
1回答
我无法在函数中访问我的更新状态。下面是我的场景：
我有一个getImages()函数，当组件第一次加载或用户到达页面末尾时调用该函数，同时滚动通过API调用获取新图像。在第一次加载组件时，我希望给出随机页面值，这就是为什么我要从第一个useEffect钩子中传递一个随机数，当用户到达页面末尾时，我希望使用pageNum状态。但是每次到达页面末尾时，pageNum值在API调用和控制台日志中都会以0的形式出现。每次在getImages()函数结束时，getImages状态都会增加1。我检查了react工具，并在那里正确地更新了pageNum状态。
下面是我的代码片段：
图像状态更新正确
浏览 4提问于2022-05-20得票数 2
我有一个react应用程序，它有一个reactstrap导航。
当窗口向下滚动到一定高度时，如何在导航栏中添加和删除类？
因此，默认状态的类是"navbar navbar-expand-sm navbar-light stick nav“。
当窗口滚动到40px的高度时，类将变成"navbar navbar-expand-sm navbar-light bg-light fixed top“。
然后，当它回滚到顶部时，它的类将返回到默认状态。
提前谢谢。
import React, { Component } from 'react';
import '
浏览 0提问于2018-06-06得票数 1
我正在尝试使用Lodash的Debounce函数和一个自定义钩子，以防止窗口调整大小事件触发得太频繁。虽然钩子可以正常工作，但我正在努力在从React useEffect钩子返回的函数中进行适当的清理。这会在浏览器控制台中导致以下错误，以及在单页应用程序中的整个用户会话中存在的事件侦听器。
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, ca
浏览 25提问于2020-05-14得票数 1
回答已采纳
我在Codepen 中找到了一个示例，说明我想在React应用程序中做什么。当我向下滚动页面时，它应该突出显示我的导航栏中的该部分，该部分在页面顶部粘滞。我的应用程序是一个单独的页面，其中包含大约5到6个部分，这些部分将是索引/内联页面，所以当用户向下滚动时，它会将它们带到下一个部分。我应该采用什么方法来合并它？更具体地说，我应该只使用React，我应该实现React Router Dom吗？从最一般的意义上讲，实现此功能的最佳方法是什么？
App
import React, {Component} from 'react';
import Footer from '
浏览 0提问于2020-08-23得票数 3
我正在尝试在我的应用程序中运行google-map-react。我的想法是，当我用谷歌地图打开页面时，它应该会显示一个包含所有数据的热图。然后我有一个下拉列表，我可以在其中选择基于工作日的数据。例如，如果我选择了星期一，google地图应该会重新呈现地图，并且只显示星期一的数据。地图在开始时是正确渲染的，但是当我点击下拉列表中的按钮时，它不会重新渲染。
这是一个bug，还是我做错了什么？希望任何人都能在这里指引我。
我已经在下面分享了我的代码。第二个代码是Maps组件。
第一个代码
import React, { useState, useEffect } from 'react&
浏览 35提问于2021-05-05得票数 0
我在试着学习反应钩。我需要帮助，在理解，反应功能，总是重置钩子状态，每次它呈现。
下面是一个滚动的小例子，我正在尝试修复标题
class Header extends Component {
constructor(props) {
super(props);
console.log("Constructor")
this.state = {fixed: false};
}
handleScroll = () => {
console.log(window.scrollY);
浏览 1提问于2020-09-21得票数 7
回答已采纳
如何在滚动元素中添加类以响应js，我想在滚动中添加类，如果在页面上删除该类。
import React from "react"
import { Link } from "react-router"
import { prefixLink } from "gatsby-helpers"
import Helmet from "react-helmet"
import { config } from "config"
module.exports = React.createClass({
propTypes
浏览 4提问于2017-05-26得票数 15
回答已采纳
2回答
我已经构建了一个React组件，它应该在窗口滚动事件时调用函数。
当用户滚动到滚动高度的90%时，我想调用函数"getCards('default')。
组件如下图所示：
class Home extends React.Component {
constructor(props) {
super(props);
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount() {
// test
this.props.getCards(&#
浏览 0提问于2017-09-11得票数 3
我不认为我在编写的函数中正确地使用了useEffect。如果我对类也这样做，就没有问题，而且我能够执行ComponentDidMount()。但我不太了解胡克斯。所以我想我在哪里出了问题。
//import { onValue } from 'firebase/database';
import React, { useEffect } from "react";
import {db} from '../../firebase';
import {ref,onValue} from 'firebase/database'
imp
浏览 4提问于2022-06-30得票数 1
2回答
使用React，什么是正确的方式来做卷轴的功能？
例如，如果用户从顶部滚动500 to，我希望控制台记录一些内容。做这件事最好的方法是什么？
浏览 4提问于2016-06-29得票数 1
回答已采纳
在Next.js 9.3中，我需要在初始渲染时访问查询，并将查询结果传递给next/head以更改页面的标题和描述。 我的组件正在从useRouter钩子获取查询。不幸的是，query对象在初始呈现时是{ amp: undefined }。在初始渲染之后，立即进行另一次渲染，它具有所有必需的细节。我开始使用这个变通方法检查路由是否准备好https://github.com/zeit/next.js/issues/8259#issuecomment-544912889，但这对next/head不起作用，因为值将是未定义的。 import React from 'react';
浏览 26提问于2020-05-03得票数 1
9回答
检测反应js中的滚动方向
、、、
我试图检测滚动事件是向上还是向下，但我找不到解决方案。
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
const Navbar = ({ className }) => {
const [y, setY] = useState(0);
const handleNavigation = (e) => {
const window = e.currentTarget;
if (y >
浏览 12提问于2020-06-21得票数 22
回答已采纳
我的组件有两个Rect.useEffect挂钩
const Example = ({ user }) => {
React.useEffect(() => {
autorun(() => {
console.log("inside autorun", user.count);
});
});
// Only runs once
React.useEffect(() => {
console.log("Why not me?");
});
return <Observer
浏览 0提问于2019-04-01得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
