React -如何在JS中获取div的滚动位置
React是一个用于构建用户界面的JavaScript库。它提供了一种声明式的编程模型，使开发人员能够轻松地构建可复用的组件，并将其组合成功能丰富的应用程序。
要在React中获取div的滚动位置，可以使用ref来引用该div，并使用相应的DOM API来获取滚动位置。下面是一个示例：
import React, { useRef } from 'react';
function ScrollPosition() {
const divRef = useRef(null);
const handleScroll = () => {
const scrollPosition = divRef.current.scrollTop;
console.log('Scroll position:', scrollPosition);
};
return (
<div ref={divRef} onScroll={handleScroll} style={{ height: '200px', overflow: 'scroll' }}>
{/* 内容 */}
</div>
);
}
export default ScrollPosition;在上面的示例中，我们使用了useRef来创建一个ref，并将其赋值给div元素的ref属性。然后，我们定义了一个handleScroll函数来处理滚动事件，并在其中使用scrollTop属性来获取滚动位置。最后，我们将handleScroll函数绑定到div元素的onScroll事件上。
这样，当div元素滚动时，handleScroll函数会被调用，并打印出滚动位置。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
1回答
在React.js中向下滚动时添加类
reactjs
我正在用React.js制作移动网页。
当只在特定的div中向下/向上滚动时，如何切换class到div？
到目前为止，这是我尝试过的。我的代码问题是它只在到达顶部时切换类。
const [scroll, setScroll] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
setScroll(window.scrollY > 50);
});
}, []);
<div class="area"&g
浏览 5提问于2021-05-12得票数 0
回答已采纳
2回答
将div的当前滚动保存到本地存储，然后进行响应。
html、reactjs、next.js、tailwind-css
我见过很多关于这个话题的问题，但似乎没有一个人像我那样谈论这个问题。它们通常涉及窗口滚动。我有一个可以溢出项的div，我希望记住用户留下的滚动。我将它保存在本地存储中，但无法获得正确的滚动位置。(这些物品有数百件)
const ItemHolder = ({
shouldScroll, // this indicates whether or not we should load the previous scroll from the storage
searchParams,
}: ItemHolderProps) => {
const [items, set
浏览 7提问于2022-01-28得票数 2
回答已采纳
1回答
React:使用可滚动元素更改状态和范围输入值
javascript、reactjs、scroll、range、state
在这里，我有一个包含范围输入值的状态：
const [currentRange, setCurrentRange = useState({currentValue: 0})
<input
type="range"
id="scroll-range"
value={currentRange.currentValue}
onChange={dragHandler}
></input>
在这里，我有一个可滚动的元素，它水平滚动：
import ScrollContainer from "react-indiana-drag-s
浏览 2提问于2021-07-08得票数 0
回答已采纳
1回答
当滚动超过某个值时，如何向元素添加类？
reactjs
当滚动像素超过2px时，我试图向元素中添加一个类，但它不起作用。请问有什么不管用的？
className={`arrowup ${window.pageYOffset >= 2 ? "showscroll":null}`}
浏览 6提问于2022-10-10得票数 1
2回答
如何获得元素上的滚动量？
javascript、reactjs
我已经制作了一个react应用程序，在这个应用程序的底部有一个滚动条的组件。这是一个水平滚动条，我想知道用户在x位置上滚动了多少。
当我在互联网上查找它时，比如，我通常会看到显示如何在窗口上获得滚动量的结果。
不过，我正在寻找我创建的一个名为<Timeline/>的组件上的滚动量，而不是窗口。
下面是我的组件在控制台上的样子：
当用户在上面滚动时，我需要查看它当前可见部分的确切位置，这样我就可以用它进行计算了。
在给定的时间内，只有div的某一部分是可见的(与窗口一样大)，其余部分都隐藏在左侧和右侧。我希望看到，当滚动，用户已经滚动了多少，有多少是不可见的在左边的屏幕。
浏览 9提问于2022-10-15得票数 1
回答已采纳
1回答
为什么这个组件在状态变化时会呈现两次？
reactjs
我正在编码一个React头组件，它将滑出滚动。(代码在底部)
我在useEffect钩子中分配了一个事件处理程序，当滚动事件发生时，它将调用handleChange函数。为了提高性能，我已经将这个handleChange函数封装在一个useCallback钩子中(不需要在每次呈现时恢复)。我还使用React.memo.I包装整个函数，将滚动位置存储在一个useRef中，因为更改不需要触发重发器，重发器将由handleChange.中的setVisibility引起
现在，这个组件呈现的次数比我预期的要多。我在组件中的每个“动作”中都添加了一个console.log，以跟踪正在发生的事情。我复制
浏览 1提问于2019-11-21得票数 0
1回答
正在尝试检测react中的滚动方向
javascript、css、reactjs、scroll
我想在滚动方向上移动一些html元素。我添加了一个scroll事件侦听器来更新scroll位置的状态。我还有一个useRef，它在每次滚动位置发生变化时存储以前的值。我比较之前的值和当前的滚动位置。如果滚动位置较大，则意味着滚动方向向下。否则，滚动方向为向上。但是，此代码不起作用。条件似乎总是读作假。如何使用react检测滚动方向。 import './App.css';
function App() {
const [scrollPosition, setScrollPosition]=useState(window.scrollY);
const prevSc
浏览 32提问于2021-08-15得票数 0
2回答
响应具有状态访问权限的滚动事件
reactjs、infinite-scroll
我试图在React中构建一个无限滚动组件(特别是使用NextJS)。我在这个特性上有问题，因为当我在窗口上设置滚动事件时，它无法访问更新的状态。如何编写一个滚动事件来侦听整个窗口上的任何滚动，这些滚动也可以像路由器查询params一样访问状态？
下面是一些代码，让我们看看我想做什么：
useEffect(() => {
window.addEventListener('scroll', handleScroll);
},[]);
const handleScroll = () => {
const el = infiniteScroll.
浏览 4提问于2022-07-07得票数 0
回答已采纳
我正在尝试创建一个具有粘性效果的页眉，但在滚动页面时出现此错误，有时会工作，有时会发生错误。有人能帮我解决这个问题吗？ ? const EventPage: React.FC = () => {
const [isSticky, setSticky] = useState(false);
const ref = useRef(null);
const handleScroll = () => {
if (ref.current.getBoundingClientRect().y <= -580 || null) {
浏览 54提问于2020-04-25得票数 0
回答已采纳
4回答
addEventListener(“滚动”)使用useRef - React可滚动<div />
javascript、reactjs、typescript、react-hooks
这是我第一次在一个项目中正确地使用，所以如果我不在的话，请容忍我。
在下面的组件中，我的目标是在加载时显示<HelperTooltip>，当滚动div (不是窗口)滚动后，我想在它滚动X个像素后隐藏它。
我的想法是在滚动的useRef元素上创建一个<div/>对象，然后我可以添加一个带有回调函数的事件侦听，然后这个回调函数可以切换状态来隐藏<HelperTooltip>。
我在下面创建了一个代码框，以尝试演示我想要做的事情。正如您在演示中看到的那样，node.addEventListener('click')工作正常，但是当我尝试调用node
浏览 11提问于2019-03-26得票数 7
回答已采纳
2回答
收听向上/向下滚动？
reactjs、scroll
我正在构建一个应用程序(ES6)，我很好奇什么是捕捉向上/向下滚动事件的“正确”方法？
我尝试(npm)安装react-scroll-listener，但是我无法让它与我的ES6类一起工作。
基本上我想要的是:如果向上滚动，执行此操作；如果向下滚动，则执行其他操作。
import React from 'react';
import config from '../config';
import StaticImageList from '../Common/StaticImageList';
import ScrollListener from
浏览 3提问于2016-08-17得票数 18
回答已采纳
1回答
侦听器函数未在功能组件中注册。
javascript、react-hooks、scroll、addeventlistener、react-functional-component
使用Functional ，我试图找到元素的滚动位置，但是当滚动发生时，侦听器函数不是注册。有人能解释为什么会发生这种事吗。
这是参考代码
export default function App() {
const [scrollPosition, setScrollPOsition] = useState(0);
const innerRef = useRef<HTMLParagraphElement>(null);
const handleScroll = () => {
console.log("handle scroll");
浏览 6提问于2022-07-13得票数 0
回答已采纳
2回答
scroll事件后的React.js调用函数
javascript、reactjs、scroll、onscroll
我已经构建了一个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
4回答
如何在React中突出显示页面滚动上的导航栏链接
javascript、reactjs、react-router
我在Codepen 中找到了一个示例，说明我想在React应用程序中做什么。当我向下滚动页面时，它应该突出显示我的导航栏中的该部分，该部分在页面顶部粘滞。我的应用程序是一个单独的页面，其中包含大约5到6个部分，这些部分将是索引/内联页面，所以当用户向下滚动时，它会将它们带到下一个部分。我应该采用什么方法来合并它？更具体地说，我应该只使用React，我应该实现React Router Dom吗？从最一般的意义上讲，实现此功能的最佳方法是什么？
App
import React, {Component} from 'react';
import Footer from '
浏览 0提问于2020-08-23得票数 3
7回答
在React中获取div的offsetTop位置
javascript、scroll、reactjs、offset
我正在尝试在React中实现一个列表视图。我正在尝试实现的是存储列表头信息，并注册组件和注册scroll事件。每次用户滚动窗口时，我都想取出存储的div并重新计算offsetTop数据。
现在的问题是，我发现在onscroll函数中，控制台只打印出初始值(值是固定的，永远不会改变)，offsetTop数据永远不会改变。
有人建议如何从_instances对象中获取最新的offsetTop吗？
import React, { Component } from 'react';
import ListHeader from './lib/ListHeader';
i
浏览 630提问于2015-09-19得票数 75
回答已采纳
3回答
如何将onScroll处理程序添加到react select组件的menuList中？
reactjs、react-select
我想将一个onScroll处理程序添加到react select组件的menuList中，但是下面的操作不起作用。我怀疑我需要为其中一个子元素设置onScroll，而不是一个包含子元素的元素，但我不知道该如何做。
import React from 'react';
import Select, { components, MenuListProps } from 'react-select';
import {
ColourOption,
colourOptions,
FlavourOption,
GroupedOption,
group
浏览 0提问于2021-11-18得票数 5
回答已采纳
2回答
react-spring视差-滚动视差时无法注册onScroll事件
reactjs、onscroll、react-spring
我使用react-spring中的视差组件来实现父组件上的视差效果。在此组件中，有一堆位于视差内的背景形状 <Parallax ref={parallaxRef} pages={7.465} scrolling={props.stageData.contractActive && !isMobile ? true : false}>
<div className="desktop-bg-shapes">
<ParallaxLayer offset={0} speed={0.5}>
浏览 35提问于2020-08-09得票数 0
1回答
跟踪在涡旋上呈现的元素
javascript、reactjs、infinite-scroll
耽误您时间，实在对不起。
我正在开发一个页面，它有一个顶级的日历组件(显示一个星期)，在这个页面下面是一个滚动组件，它显示了一周中每一天的信息。
到目前为止，这是我的页面：
这里的问题是，我需要知道滚动显示在日历上标记它的日期，就像下面的例子，用户在第3天，第3天在日历上标记：
我见过滚动跟踪问题，其中的解决方案链接到ScrollY和ScrollX位置，但在本例中，我需要一些DOM元素的信息，比如id或其他什么，我不知道是否可能。
我也尝试过react无限滚动的onScroll方法，但是它返回整个文档。
这是代码：
控制台打印：
非常感谢!
浏览 3提问于2020-11-20得票数 0
1回答
如何在当前组件中使用handleScroll？
reactjs、scroll
我想为我的组件设置handleScroll事件，但是当前的代码是在我移动浏览器窗口的滚动时触发的，我想要它在我移动我的组件的滚动时触发，我该怎么办？ import classNames from 'classnames'
import { useEffect, useState } from 'react'
const Header = _ => {
const [ scrolled, setScrolled ] = useState()
const classes = classNames('header', {
sc
浏览 92提问于2021-07-01得票数 0
回答已采纳
2回答
React自定义钩子滚动监听器仅触发一次
javascript、reactjs、scroll、react-hooks
我尝试使用自定义钩子在组件中实现滚动指示器。 这是组件：... const DetailListInfo: React.FC<Props> = props => {
const container = useRef(null)
const scrollable = useScroll(container.current)
const { details } = props
return (
<div
ref={container}
className="content-list-info content-lis
浏览 74提问于2020-07-16得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
