javascript - 当我在 React 上滚动时如何移动按钮？

Question

所以我在下面有这段代码。当我向下滚动时，我只想将此粘性按钮向右移动或移动到屏幕上的任何不同位置。我已经问了一些朋友，你不能onScroll在 React 上使用或类似的东西，你必须创建document-on-scroll-something我相信，我被卡住了，我需要帮助。同样，下面是我的代码。

应用程序.js

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <ScrollTest />
    </div>
  );
}

class ScrollTest extends React.Component {
  render() {
    return (
      <div id="myScroll">
        <button className="myButton">Click Me</button>
        <h3>Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    );
  }
}

样式.css

.App {
  font-family: sans-serif;
  text-align: justify;
}

#myScroll .myButton {
  position: sticky;
  top: 0;
}

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

或者你可以在这里访问我的实时代码

非常感谢

编辑：错字，onScroll不应该onScreen

标签： javascripthtmlcssreactjs

Answer 1

我很困惑为什么你不能onScroll用来做这个。

分解正在做的事情：

• 设置 scrollListener 变量useRef

   const scrollListener = React.useRef();

• 设置它以观看您的可滚动 div 以及onScroll事件：

<div onScroll={() => onScroll()} ref={scrollListener}>
   [SCROLLABLE CONTENT]
</div>

• 现在您需要实现 onScroll 函数，您可以在其中使用状态来控制您需要在 DOM 上控制的任何内容。

对于这种情况，我只是检查您何时通过向下滚动达到 div 高度的 85%，并且reachedBottom在达到该点时设置标志。我稍后使用该信息将按钮拉到右侧，这就是您提到的想要做的事情。

const onScroll = () => { 
        if (scrollListener.current) {
          const { scrollTop, scrollHeight, clientHeight } = scrollListener.current;

          if (scrollTop + clientHeight >= scrollHeight * 0.85) {
            if (!reachedBottom) {
              setReachedBottom(true);
            }
          } else {
            if (reachedBottom) {
              setReachedBottom(false);
            }
          }
        }
      };

这是一个与您的非常相似的示例应用程序，我按照您的描述进行操作。

const App = () => {
    const scrollListener = React.useRef();
    const [reachedBottom, setReachedBottom] = React.useState(false);
    
const onScroll = () => {
    if (scrollListener.current) {
      const { scrollTop, scrollHeight, clientHeight } = scrollListener.current;

      if (scrollTop + clientHeight >= scrollHeight * 0.85) {
        if (!reachedBottom) {
          setReachedBottom(true);
        }
      } else {
        if (reachedBottom) {
          setReachedBottom(false);
        }
      }
    }
  };

  return (
  <div className='myScroll' >
   <button className="myButton" style={{float: reachedBottom ? 'right' : ''}}>Click Me</button>
      <div className="main" onScroll={() => onScroll()} ref={scrollListener}>
       
        <h3>Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
  </div>
  )
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

    .App {
      font-family: sans-serif;
      text-align: justify;
    }

    #myScroll .myButton {
      position: sticky;
      top: 0;
    }

    .main {
      position: relative;
      height: 300px;
      overflow-y: scroll;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
    <div id="app"></div>