React:以编程方式滚动到 Div 的底部/顶部

这篇简洁实用的文章向您展示了如何在 React 中以编程方式滚动到可滚动 div 元素的底部或顶部。

步骤:

1.使用useRef() 钩子创建一个ref :

const divRef = useRef();
  1. 将 ref 附加到div元素:
<div ref={divRef}>{/* ...*/}</div>
  1. 要平滑滚动到 div 的底部,请使用以下命令:
divRef.current.scroll({ 
    top: divRef.current.scrollHeight, 
    behavior: 'smooth' 
});
  1. 要轻轻滚动到 div 的顶部,请使用以下命令:
divRef.current.scroll({ top: 0, behavior: 'smooth' });

让我们将所有这些东西绑定到一个工作示例中。

完整示例

应用预览

我们将要制作的演示显示一个包含大量文本的可滚动 div。我们还有 2 个按钮。一个用于将 div 滚动到底部,另一个用于将 div 滚动到顶部。

React:以编程方式滚动到 Div 的底部/顶部

编码

1.新建一个React项目:

npx creat-react-app kindacode-scrollable-div

从现在开始,我们将只关注 2 个文件:src/App.jssrc/App.css

2. src/App.js的完整代码(附解释):

// KindaCode.com
// src/App.js
import { useRef } from 'react';
import './App.css';

function App() {
  // Create a reference to the div with className="scrollable-div"
  const divRef = useRef(null);

  // This function is called when the user clicks on the "Scroll To Top" button
  // it will scroll the div with className="scrollable-div" to the top
  const scrollToTop = () => {
    divRef.current.scroll({ top: 0, behavior: 'smooth' });
  };

  // This function is called when the user clicks on the "Scroll To Bottom" button
  // it will scroll the div with className="scrollable-div" to the bottom
  const scrollToBottom = () => {
    divRef.current.scroll({ top: divRef.current.scrollHeight, behavior: 'smooth' });
  };

  return (
    <div className='container'>
      <h1>Welcome to KindaCode.com</h1>
      <div className='button-group'>
        <button onClick={scrollToTop} className='button'>
          Scroll to Top
        </button>
        <button onClick={scrollToBottom} className='button'>
          Scroll to Bottom
        </button>
      </div>

      {/* This div displays a lot of dummy text and is scrollable */}
      {/* We will programatically scroll it to the top/bottom */}
      <div ref={divRef} className='scrollable-div'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut
        egestas mauris. Maecenas leo mauris, accumsan vel velit ac, blandit
        lobortis est. Vivamus in erat ac magna faucibus placerat eget non
        ligula. Aliquam consequat rhoncus turpis a convallis. Pellentesque ac
        sapien rhoncus, congue nibh eget, finibus turpis. Aenean volutpat
        malesuada augue, at lacinia dolor volutpat congue. Ut sit amet nunc ac
        arcu imperdiet iaculis. Mauris sit amet quam ut nisi blandit blandit
        congue nec lorem. Mauris viverra, quam non aliquet pellentesque, lorem
        risus fermentum mi, a mollis turpis velit vitae nulla. Proin auctor,
        elit a rhoncus vulputate, est magna facilisis ipsum, non mattis sem odio
        in neque. Cras at ultricies eros. Ut risus turpis, consequat sed auctor
        nec, rutrum id mauris. Aliquam maximus, purus vel tempus luctus, libero
        ipsum consectetur purus, eu efficitur mi nunc sed purus. Etiam tristique
        sit amet nisi vel rhoncus. Vestibulum porta, metus sit amet tincidunt
        malesuada, dui sapien egestas magna, quis viverra turpis sapien a dolor.
        Fusce ultrices eros eget tincidunt viverra. Ut a dapibus erat, vel
        cursus odio. Phasellus erat enim, volutpat vel lacus eu, aliquam sodales
        turpis. Fusce ipsum ex, vehicula tempor accumsan nec, gravida at eros.
        In aliquam, metus id mollis interdum, nunc sem dignissim quam, non
        iaculis tortor erat nec eros. Nunc sollicitudin ac dolor eget lobortis.
        Aenean suscipit rutrum dolor in euismod. Curabitur quis dapibus lectus.
        Mauris enim leo, condimentum ac elit sit amet, iaculis vulputate sem.
        Integer bibendum ipsum nec sodales malesuada. Fusce eu nisi quis diam
        maximus rutrum. Nulla elementum turpis lacus, ut facilisis est ornare
        eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
        dictum mauris nec tellus facilisis vehicula. Nunc mattis, lorem ac
        pharetra bibendum, nisl mi gravida justo, condimentum feugiat eros
        tellus vel velit. Nulla a elementum nulla. Donec tincidunt nunc nec
        libero faucibus, id maximus libero porttitor. Curabitur vel libero
        scelerisque, sodales elit in, fermentum odio. Phasellus rutrum eleifend
        sapien, eu congue turpis blandit varius. Quisque fringilla felis
        interdum magna vulputate, id tincidunt diam lacinia. Suspendisse ut
        vehicula leo. Morbi ornare blandit felis vitae maximus. Aenean hendrerit
        consectetur orci vitae interdum.
      </div>
    </div>
  );
}

export default App;
  1. CSS 对这个例子很重要。删除src/App.css文件中的所有默认代码,然后将以下内容添加到其中:
/* KindaCode.com */
/* src/App.css */
.container {
  padding: 30px;
}

.button-group {
  margin: 30px 0;
}

.button {
  margin-right: 20px;
  padding: 10px 30px;
  cursor: pointer;
  border: none;
  background: #3f51b5;
  color: #fff;
  font-weight: bold;
}

.button:hover {
  background: red;
}

.scrollable-div {
  width: 600px;
  height: 260px;
  overflow: auto;
  background: #fffde7;
  border: 1px solid #ddd;
}

结语

我们已经探索了在 React 中滚动到底部或顶部的 div 元素的技术,并遍历了在实践中应用该技术的端到端示例。尝试修改代码,更改一些 CSS 值,删除一些代码行,看看接下来会发生什么。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:以编程方式滚动到 Div 的底部/顶部