ReactJs如何在单击或提交时滚动到div底部
？
在React中，可以使用ref来引用DOM元素，并通过操作DOM来实现滚动到div底部的效果。
首先，在需要滚动到底部的div元素上添加ref属性，例如：
<div ref={myDivRef}></div>然后，在组件中定义ref对象：
const myDivRef = useRef(null);接下来，可以在单击或提交事件的处理函数中使用ref对象来滚动到div底部。例如，在单击事件处理函数中：
const handleClick = () => {
myDivRef.current.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
}这里使用了scrollIntoView方法来实现滚动效果，其中behavior参数设置为'smooth'表示平滑滚动，block参数设置为'end'表示滚动到底部，inline参数设置为'nearest'表示尽可能靠近视口。
完整的代码示例：
import React, { useRef } from 'react';
const MyComponent = () => {
const myDivRef = useRef(null);
const handleClick = () => {
myDivRef.current.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
}
return (
<div>
<button onClick={handleClick}>滚动到底部</button>
<div ref={myDivRef}></div>
</div>
);
}
export default MyComponent;这样，当点击按钮时，页面会平滑地滚动到div底部。
推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云云函数（SCF）。
- 腾讯云服务器（CVM）：提供可扩展的云服务器实例，适用于各种规模的应用程序和工作负载。了解更多信息，请访问：腾讯云服务器（CVM）
- 腾讯云云函数（SCF）：无服务器计算服务，可帮助您构建和运行无需管理服务器的应用程序。了解更多信息，请访问：腾讯云云函数（SCF）
相关·内容
1回答
如何将useRef和scrollIntoView滚动到映射列表中的特定元素
javascript、reactjs
我有一个在y轴上可滚动的事件列表，如下所示：
{events.map((event) => (
<li
ref={event.ref}
key={event.id}
>
{event.name)
</li>
))}
单击按钮时，我希望我指定的事件滚动到上面映射列表的顶部。
我目前正在使用useRef，但我不知道如何指定我想要滚动到顶部的确切事件。
例如，当单击按钮时，假设我希望滚动到id为5的事件。
以下是我的当前代码：
const eventRef = useRef(null);
const scro
浏览 6提问于2022-02-25得票数 0
回答已采纳
1回答
手风琴打开后反应引导卷轴向下滚动到内容
javascript、reactjs、react-hooks、react-bootstrap
我有一个react引导表列手风琴，其中包含内容。我面临的问题是，如果面板打开用户无法识别的内容，直到向下滚动。
当手风琴折叠打开时，我希望能够向下滚动到内容。
这就是我的父函数组件的样子，
import React, {forwardRef, useContext} from "react";
import AccordionContext from "react-bootstrap/AccordionContext";
import { Table } from "react-bootstrap";
function CustomToggl
浏览 4提问于2022-02-24得票数 0
2回答
TypeScript错误:类型'scrollIntoView‘上不存在属性’scrollIntoView‘。TS2339
javascript、reactjs、typescript
在我的组件中，我有以下代码要滚动到页面底部：
const el = useRef(null);
useEffect(() => {
if (el.current === null) { }
else
el!.current!.scrollIntoView({ block: 'end', behavior: 'smooth' });
if (props.loading != true)
props.fetchFeedbackTaskPageData(submissionId);
}, [])
这个
浏览 0提问于2019-07-14得票数 28
回答已采纳
2回答
在React中使用document.querySelector？我应该用ref代替吗？多么?
javascript、reactjs、ref、use-effect、js-scrollintoview
我现在正在React中构建一个旋转木马。要滚动到我使用document.querySelector的各个幻灯片，如下所示：
useEffect(() => {
document.querySelector(`#slide-${activeSlide}`).scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'nearest'
});
}, [activeSlide]);
这是不是很糟糕的做法？毕竟，我是在这里直接
浏览 11提问于2019-12-06得票数 24
回答已采纳
2回答
滚动到重新加载页面上的元素
javascript、reactjs、react-hooks
我试图弄清楚如何在页面重新加载后滚动到元素。我正在尝试ref该元素，并在页面重新加载后滚动到它。
我的当前示例将滚动到页面的末尾。
const transactionRef = useRef(null)
const scrollToElemet = () => {
transactionRef.current.scrollIntoView({ block: 'end', behavior: 'smooth' });
}
useEffect(scrollToElemet)
return (
<div ref={transacti
浏览 2提问于2020-02-14得票数 0
回答已采纳
3回答
ScrollIntoView行为平滑在react中被破坏
reactjs
我有一个有多行的表格，每行都有一个按钮，点击其中任何一个按钮，我想让它滚动到顶部，一些我是如何实现的，但滚动并不平滑，它直接跳到那个div上，我已经使用了多个npm库，polyfill(由github问题上的铬团队建议)，使用窗口对象，尝试在chrome://flags中更改(启用平滑滚动)，但这些都不起作用……如果我在不使用({behavior: "smooth"})的情况下使用它，它会直接跳到上面，当我使用({behavior: "smooth"})时，它会像滚动到顶部(比如1 1mm)一样损坏100ms，然后就会像滞后一样停止。 请帮帮我！ smooth
浏览 71提问于2020-01-17得票数 5
1回答
ScrollIntoView()可以找到html元素
javascript、reactjs、null、js-scrollintoview、create-ref
，我正在尝试创建一个滚动元素，但是我得到了这个错误
"TypeError:无法读取属性'scrollIntoView‘的null“。通过控制台日志记录mapRef，我可以看到我得到了正确的div。
export class FinderComponent extends PureComponent {
constructor(props) {
super(props);
this.mapRef = React.createRef();
}
renderMap() {
return <div block="StoreFinder
浏览 0提问于2021-08-30得票数 0
回答已采纳
1回答
将ref传递给子节点以使用ScrollIntoView
reactjs、react-hooks、js-scrollintoview、react-ref
我有两个组成部分。父母和孩子。
在父组件中，我有一个按钮。如果用户单击该按钮，我希望对子组件中的另一个按钮执行ScrollIntoView。
我想我想要定义对childs按钮a的引用，这样我就可以在父按钮onClick中执行如下操作：
ref.scrollIntoView({block: 'end', behavior: 'smooth'});
它将滚动到子组件中的按钮。
下面是一个很小的例子：
ParentComponent.jsx
import React, {useRef} from 'react';
import ChildCompone
浏览 1提问于2019-12-02得票数 6
回答已采纳
2回答
在ReactJs中鼠标向下或按钮悬停时，连续滚动动画
javascript、reactjs
一些背景：
我试图达到类似的滚动效果，在Etsy的产品形象，缩略图，旋转木马。当您悬停在div的顶部时，它会自动滚动，直到显示最后一个图像，在底部也会出现同样的情况。
下面是一个随机产品的，您可以在这里检查功能。
我一直试图用react来实现这一点，所以我决定从鼠标向下滚动开始，并停止鼠标向上滚动。
我找到了的一个很好的例子
问题在于它使用的是jquery。我试着把它转换成香草js，并在我的react应用程序上使用，但没有成功。
经过更多的研究，我最终得到了一个可行的解决方案，但动画一点也不流畅。我用了一个setInterval钩。这是我的密码。
import { useRef, useSta
浏览 4提问于2021-11-18得票数 2
回答已采纳
1回答
滚动到页面上某个组件的“React”方式是什么？
reactjs、react-ref
我想有一个标题与链接，将滚动到页面上的这些部分。
我可以用refs来实现这一点吗？也许是forwardRef
在香草JS中，我要做到这一点：
onClick=(()=>{
let elm = document.getElementById('experience-head');
elm.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nea
浏览 4提问于2020-11-11得票数 0
回答已采纳
2回答
反应滚动从底部开始
reactjs
我有一个聊天页面，在这里我从服务器收到一条消息，我需要实现它，以便滚动的滚动从最后一个元素开始。我使用useRef钩子滚动，但是我的控制台给出了一个错误(TypeError:无法读取属性'scrollIntoView‘of null)。但是在沙箱里一切都是正确的。我不明白我的错误在哪里。
反应：
import React, {useEffect, useRef} from "react";
import styled from "styled-components";
const TabPanelBody = ({messages}) =>
浏览 1提问于2020-03-11得票数 0
回答已采纳
1回答
React horizontall按钮滚动
javascript、arrays、reactjs、horizontal-scrolling
我正在尝试创建一个带有按钮的水平滑块，但我在导航方面遇到了问题。当我依次单击向右和向左时，块将向右移动1。
我尝试过useEffect，但在刷新页面后，效果会将整个页面移动到滑块上
我的代码：
const item = useRef({})
// use state
const lastIndex = slides.length;
// const lastIndex = slider_info.slice(-1);
const [i, setCount] = useState(0);
const scrollToNextSlide = () => {
item.cur
浏览 1提问于2021-02-25得票数 0
1回答
如何使用Jest和react-testing-library测试useRef？
reactjs、jestjs、react-testing-library
我使用create-react-app、Jest和react-Jest library来配置聊天机器人项目。
我有一个使用useRef钩子的功能组件。当一个新的消息到达时，useEffect钩子被触发，并通过查看引用的当前属性来引起滚动事件。
const ChatBot = () => {
const chatBotMessagesRef = useRef(null)
const chatBotContext = useContext(ChatBotContext)
const { chat, typing } = chatBotContext
useEffect(()
浏览 11提问于2019-11-27得票数 13
回答已采纳
1回答
带滚动的CSS转换
javascript、css、reactjs、scroll
我有一个div，里面有很多文本，我希望它在点击时向下打开，并显示文本。当单击div时，我还想向下滚动到元素的底部。我尝试过scrollIntoView，但由于某种原因，它不会一直滚动到元素的底部。在全屏上，它工作，但如果我减少屏幕大小，它滚动较少，它应该。在打开之前，它似乎只能滚动到div下的金额。如有任何建议，将不胜感激。
import style from "./education.module.css"
import { useState } from "react"
import { useRef } from "react"
impor
浏览 1提问于2020-08-31得票数 0
8回答
在反应中处理滚动动画
javascript、reactjs、redux
什么是正确的方式处理滚动位置的反应？我真的喜欢顺利滚动，因为更好的用户体验。由于在React中操作DOM是一种反模式，我遇到了问题:如何平滑地滚动到某个位置/元素？我通常更改元素的scrollTop值，但这是对DOM的操作，这是不允许的。
代码：
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
handleClick = e => {
for (let i = 1; i <= 100; i
浏览 6提问于2017-06-05得票数 36
4回答
无法读取属性'scrollIntoView‘的null
reactjs
为什么这不像预期的那样起作用？有时起作用，有时不起作用-我想不出这个办法。使用ScrollIntoView的代码片段是从另一个带有另一个页面的js文件中复制的，在那个页面中，它工作得很好吗？ID的refTP和refPP在ReferencesPP和ReferencesTP的div标记中找到
import React, {useState} from 'react'
import ReferencesPP from './referencesPP'
import ReferencesTP from './referencesTP'
import &#
浏览 1提问于2021-02-04得票数 2
回答已采纳
1回答
在用户滚动400 to后，如何使内部div滚动到底部？
javascript、reactjs
我正在构建一个聊天应用程序，当用户滚动到400 of时，我想要一个内部div(其中包含聊天)，并将最大高度设置为滚动到该最大高度的底部。
Currently I am using this component in the bottom of that inner div.
const ScrollBottom = () => {
const elementRef = useRef(null);
const [showTopBtn, setShowTopBtn] = useState(false);
useEffect(() =&g
浏览 6提问于2022-09-28得票数 0
1回答
scrollIntoView动态长度数组中参考文献的应用
react-hooks
我对使用useEffect和useRef有点陌生。我想要做的是创建一个内容管理系统，为单个页面滚动应用程序的数据库中的n个页面元素启用scrollIntoView。
我无法让它起作用，所以我希望能得到一些帮助。
我发布了一个简单的测试，其中我有一个功能反应组件，其中第2节工作(点击按钮滚动到页面元素。
但我的目标是从数据库中获取'n‘节，并创建'n’个参考数，向下滚动到'n‘个节数。
我试过useRef，useEffect等，但是我很困惑。我的代码片段显示了一个工作示例，其中包含第2节的手动引用声明，但是第1节试图使用一个引用集合，这是不起作用的。
下面是一个代码示例：
浏览 0提问于2019-09-02得票数 1
回答已采纳
1回答
如何在反应中只滚动特定的容器？
javascript、reactjs、vertical-scrolling
我正在尝试创建一个列表在一个反应应用程序，用户可以附加项目。此列表位于具有固定高度的div中，因此在某些项之后，用户必须滚动。我想要实现的行为是，当用户向列表中添加一个新项时，列表会滚动到末尾。无论我尝试使用哪种解决方案，总是会发生的情况是，整个页面也会滚动。我希望页面保持在正确的位置-列表本身不应该移动-只有列表div滚动到它的末尾。
这是我的最小工作示例，如果您将其放在一个可滚动的页面中，即。
const Test = () => {
const [num, setNum] = useState([0, 1, 2]);
const last = useRef(null
浏览 9提问于2022-07-05得票数 0
回答已采纳
1回答
如何从一个组件滚动到另一个组件的元素？
javascript、reactjs、scroll、scrollto
我有两个组件，组件A和组件B，它们在同一个页面中呈现。我需要的是，一旦单击组件A中的一个按钮，就滚动到组件B的div。
组件B：
import React, { FC, useRef } from 'react';
const Footer: FC<Props> = ({ children }) => {
const commentSection = useRef(null);
const gotoCommentSection = () => window.scrollTo({top: commentSection.current.offsetTop,
浏览 4提问于2021-02-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
