React - 如何在 JS 中获取 div 的滚动位置答案

【问题标题】：React - How to get the scroll position of a div in JSReact - 如何在 JS 中获取 div 的滚动位置
【发布时间】：2020-12-28 07:51:29
【问题描述】：

我有一个侧面导航栏，里面有一个标题和一些其他信息，标题名称是粘性的，侧面板的高度为 100vh。我希望我的标题 div (sticky-title) 仅在用户向下滚动时（上下文大于 100vh）才具有 box-shadow。换句话说，box-shadow 属性最初不应该存在，但是当用户向下滚动页面时它应该出现。我尝试触发滚动 EventListener，但它占用了主窗口的滚动位置，尽管我希望考虑侧边栏 div 的滚动位置。

下面是代码沙盒游乐场的链接。

https://codesandbox.io/s/blue-glitter-6ds36

【问题讨论】：

你看过Element.scrollTop吗？您只需要在侧边栏添加一个ref。
@NateLevin 谢谢！我能够使用 scrollTop 并在操场上取得了预期的效果。我将 id 给了我的 div 并在onScroll 上触发了处理程序但是，在我的应用程序中，这个 div 是由 UI 库生成的（并且没有与该 div 关联的 id）。另一个问题是 - 由于这个 div 是由 UI 库获取的，我如何触发 onScroll 事件？ codesandbox.io/s/interesting-fire-9bksx?file=/src/App.js这是工作。
对不起，当我指出参考文献时，我才意识到我使用了相同的链接。 This 是我要指向您的链接。您所要做的就是<Component ref={this.refName} />
我正在尝试理解 useRef，但这对我来说有点新。我可以使用 DOM 创建的未出现在渲染函数中的 refs 访问这些元素吗？希望我的要求是有道理的。 @NateLevin
您能告诉我们您是如何使用该组件的吗？您可以获取最顶层元素的 ref，然后使用 querySelectors 获取您想要的元素。

标签： javascript html css reactjs

【解决方案1】：

在App.js 中查看这些更改是否对您有帮助：

  useEffect(() => {
    
    // Select the title wrapper
    const title = document.querySelector('.sticky-title');
    
    const titleTop = title.offsetTop; // find the top position of title block 
                                      // relative to the window top

    window.addEventListener("scroll", () => {

      console.log("hi", titleTop);
      setScroll(this.scrollY >= titleTop); // when window.scrollY is greater than top 
                                           // the top of the title block the scroll 
                                           // state is set to True  
    });
  }, []);

也在App.js的JSX部分：

<div className="panel" style={{ height: 2000 }}>{/*2000px to scroll the page easier*/}
  ...
</div>

和style.css:

.panel {
  width: 200px;
  height: 100vh;
  border: 2px solid black;
  white-space: pre-line;
  /* overflow: auto; */ <---- delete this because it prevents position: sticky to work
}

【讨论】：

行等价于 - const title = document.querySelector('.sticky-title');在我的代码中返回 null。
尝试选择<h2>元素的父元素。你可以给它和id="title" 然后const title = document.querySelector('#title');