Javascript 相同的函数不'；不要在不同的平台上工作

我正在使用React JS库跟踪用户滚动高度，并根据收到的数据应用函数

它在上运行良好，但一旦我在npm localhost上运行它，它就不存在了，尽管我使用的是完全相同的代码

这是我试图在localhost上应用的函数，但始终返回0:

//Scroll event listener to change menu background color
const ScrollingElement = () => {
  const [scrollY, setScrollY] = useState(0);

  function logit() {
    setScrollY(window.pageYOffset);
  }

  useEffect(() => {
    function watchScroll() {
      window.addEventListener("scroll", logit);
    }
    watchScroll();
    // Remove listener (like componentWillUnmount)
    return () => {
      window.removeEventListener("scroll", logit);
    };
  }, []);
  console.log(scrollY);
  return scrollY;
}

function App() {
  console.log(ScrollingElement());
  return (
    <div>
      <Menu scrollHeight={ScrollingElement()}></Menu>
      <Home></Home>
    </div>
  );
}

我试着调试

scrollY

变量，在本地主机上，无论发生什么情况，我都会收到0的allways值。 我猜这是某种定义错误，codesandbox.io有，我没有

还尝试了对应用程序函数进行以下调试，并返回0：

//Scroll event listener to change menu background color
const ScrollingElement = () => {
  const [scrollY, setScrollY] = useState(0);

  function logit() {
    setScrollY(window.pageYOffset);
  }

  useEffect(() => {
    function watchScroll() {
      window.addEventListener("scroll", logit);
    }
    watchScroll();
    // Remove listener (like componentWillUnmount)
    return () => {
      window.removeEventListener("scroll", logit);
    };
  }, []);
  console.log(scrollY);
  return scrollY;
}

function App() {
  console.log(ScrollingElement());
  return (
    <div>
      <Menu scrollHeight={ScrollingElement()}></Menu>
      <Home></Home>
    </div>
  );
}

函数应用程序（）{
log（ScrollingElement（））；
返回(
);
}

如何在codesandbox中工作的localhost上运行代码？

您的

正在工作，但您需要确保您的父组件实际上是可滚动的。最简单的解决方案是创建新的

组件，并使用css设置其高度

function Wrapper() {
  return (
    <div style={{height: "200vh"}}>
      <ScrollingElement />
    </div>
  );
}

函数包装器（）{
返回(
);
}

可运行示例：

const{useState，useffect}=React；
函数包装器（）{
返回(
);
}
常量滚动元素=（）=>{
const[scrollY，setScrollY]=useState（0）；
函数logit（）{
setScroly（window.pageYOffset）；
}
useffect（（）=>{
函数watchScroll（）{
window.addEventListener（“滚动”，logit）；
}
watchScroll（）；
return（）=>{
removeEventListener（“滚动”，logit）；
};
}, []);
console.log（滚动）；
返回滚动条；
}
render（，document.getElementById（“根”））

您的
正在工作，但您需要确保父组件实际上是可滚动的。最简单的解决方案是创建新的
组件，并使用css设置其高度

function Wrapper() {
  return (
    <div style={{height: "200vh"}}>
      <ScrollingElement />
    </div>
  );
}

函数包装器（）{
返回(
);
}

可运行示例：


const{useState，useffect}=React；
函数包装器（）{
返回(
);
}
常量滚动元素=（）=>{
const[scrollY，setScrollY]=useState（0）；
函数logit（）{
setScroly（window.pageYOffset）；
}
useffect（（）=>{
函数watchScroll（）{
window.addEventListener（“滚动”，logit）；
}
watchScroll（）；
return（）=>{
removeEventListener（“滚动”，logit）；
};
}, []);
console.log（滚动）；
返回滚动条；
}
render（，document.getElementById（“根”））

@evolutionxbox但如何正确返回？我真的看不出如何做的语法。对不起，我只是在你的代码笔中试过，代码按预期工作。请确保问题中的代码是正确的，以便我们可以帮助您调试该问题。@evolutionxbox尝试在localhost上运行它，它不起作用。我将分享我所做的一些调试。@evolutionxbox但如何正确返回它？我真的看不出如何做的语法。对不起，我只是在你的代码笔中试过，代码按预期工作。请确保问题中的代码是正确的，以便我们可以帮助您调试该问题。@evolutionxbox尝试在localhost上运行它，它不起作用。我将分享我所做的一些调试。我已经试过你所说的了，只是行不通。。有些东西似乎将页面分割开来，如果您尝试在菜单部分滚动，您将无法这样做..不，所以我遵循了这一点，但我尝试了您的解决方案如果您使用“run code snippet”（运行代码片段）按钮运行上面的代码片段，但它不起作用，请尝试在其他浏览器中运行它。让我知道这是否仍然不起作用。它在代码片段中对我起作用，但一旦我在我的网站上运行它，它就不起作用了。我已经试过你所说的了，只是行不通。。有些东西似乎将页面分割开来，如果您尝试在菜单部分滚动，您将无法这样做..不，所以我遵循了这一点，但我尝试了您的解决方案如果您使用“run code snippet”（运行代码片段）按钮运行上面的代码片段，但它不起作用，请尝试在其他浏览器中运行它。让我知道这是否仍然不起作用。它在代码片段中对我起作用，但一旦我在我的网站上运行它，它就不起作用了。