如何在底部滚动以响应按钮答案

【问题标题】：How to scroll at bottom in react on button如何在底部滚动以响应按钮
【发布时间】：2020-11-11 19:30:59
【问题描述】：

当用户单击按钮时，我试图在底部向下滚动用户。我真的很努力，但没有找到任何解决方案。有人可以帮助我如何实现我的目标。

谢谢

【问题讨论】：

window.scroll({ bottom: 0, left: 0, behavior: 'smooth' });
@demkovych 你能举个反应的例子吗？

标签： javascript reactjs ecmascript-6 react-redux

【解决方案1】：

您可以使用useRef 挂钩来滚动到特定的 div。这是通过 react 和使用 react hooks 最推荐的方法。

App.js

import React, { useRef } from "react";
import "./styles.css";

export default function App() {
  const divRef = useRef();

  return (
    <div className="App">
      <button
        onClick={() => {
          divRef.current.scrollIntoView({ behavior: "smooth" });
        }}
      >
        Scroll to Bottom
      </button>
      <div className="bigDiv" />
      <div className="bigDiv" />
      <div className="bigDiv" />
      <div className="bigDiv" ref={divRef}>
        Scrolled Here
      </div>
    </div>
  );
}

样式.css

.App {
  font-family: sans-serif;
  text-align: center;
}
.bigDiv {
  height: 100vh;
  width: 100%;
  background: cyan;
  border: 1px solid violet;
}

【讨论】：

【解决方案2】：

有几种方法可以实现这一点：

const onClick = () => {
  window.scroll({
    bottom: document.body.scrollHeight, // or document.scrollingElement || document.body
    left: 0,
    behavior: 'smooth'
  });
}

...

return <button onClick={onClick} ... />

另一种方式是ref。您需要在页面底部添加一个元素并在单击按钮后滚动到它：

const bottomRef = React.useRef();

const onClick = () => {
  bottomRef.current.scrollIntoView();
}

...

return (
  <div className="container">
    <button onClick={onClick} />
 
    <div className="bottomContainerElement" ref={bottomRef} />
  <div>
)

【讨论】：

【解决方案3】：

您可以使用document.body.offsetHeight 获取页面高度并使用windows.scroll 滚动到它。如果需要支持IE11及以下使用window.scroll(0, document.body.offsetHeight);

import React from 'react';

function App() {

  function handleScroll() {
    window.scroll({
      top: document.body.offsetHeight,
      left: 0, 
      behavior: 'smooth',
    });
  }

  return <button type="button" onClick={handleScroll}>Scroll</button>;

}

【讨论】：

【解决方案4】：

你安装 react-scroll-button npm 包

npm i react-scroll-button

使用代码

import React, {Component} from 'react'
import ScrollButton from 'react-scroll-button'
 
class ScrollComponent extends Component {
    render() {
        return (
            <ScrollButton 
                behavior={'smooth'} 
                buttonBackgroundColor={'red'}
                iconType={'arrow-up'}
                style= {{fontSize: '24px'}}
            />
        );
    }
}

【讨论】：