如何使 div 滚动到其容器的底部，然后在 React 中完成后向上滚动？

Question

I've got multiple columns in a table that exceed the screen height while some do not, so I'm trying to get the overflowing columns to auto scroll down to show all data, then scroll back up, repeatedly.

I tried a recursive function like:

function colScroll() {
    let el = document.getElementById("col");
    if (el.scrollHeight - el.scrollTop === el.clientHeight) {
      el.scrollBy(0,-1);
    } else {
      el.scrollBy(0,1);
    }
    let scrolldelay = setTimeout(colScroll,10);
  }

However I get the Maximum call stack size exceeded error for that. Works on non-React code, but not with React.

EDIT

Full code.

import React from 'react';
import axios from 'axios';
import DataCard from './DataCard';
import 'bootstrap/dist/css/bootstrap.min.css';
import './app.scss';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    }

    this.scrollColumn = this.scrollColumn.bind(this);
  }

  scrollColumn() {
    let el = document.getElementById("col-pending-auth");
    if (el.scrollHeight - el.scrollTop === el.clientHeight) {
      el.scrollBy(0,-1);
    } else {
      el.scrollBy(0,1);
    }
    scrolldelay = setTimeout(scrollColumn, 10);
  }

  componentDidMount() {
    const url = new URL("example.com");
    const params = {};
    url.search = new URLSearchParams(params).toString();

    axios.get(url)
      .then(res => {
        this.setState({data: res.data});
        console.log(res.data);
      });

      this.scrollColumn();
  }

  render() {
    return(
      <div className="table-responsive">
        <table className="table">
        <thead>
          <tr>
          <th scope="col">Proposed</th>
          <th scope="col">Pending Auth</th>
          <th scope="col">Rejected</th>
          <th scope="col">Approved</th>
          <th scope="col">Pending Review</th>
          <th scope="col">Plant Reviewed</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div className="scroll-container" id="col-proposed">
                {
                  this.state.data.map((item, idx) => {
                    if (item.ID === "0") {
                      return <DataCard cardData={item} key={idx} />
                    }
                  })
                }
              </div>
            </td>
            <td>
              <div className="scroll-container" id="col-pending-auth">
                {
                  this.state.data.map((item, idx) => {
                    if (item.ID === "1") {
                      return <DataCard cardData={item} key={idx} />
                    }
                  })
                }
              </div>
            </td>
            <td>
              <div className="scroll-container" id="col-rejected">
                {
                  this.state.data.map((item, idx) => {
                    if (item.ID === "3") {
                      return <DataCard cardData={item} key={idx} />
                    }
                  })
                }
              </div>
            </td>
            <td>
              <div className="scroll-container" id="col-approved">
                {
                  this.state.data.map((item, idx) => {
                    if (item.ID === "2") {
                      return <DataCard cardData={item} key={idx} />
                    }
                  })
                }
              </div>
            </td>
            <td>
              <div className="scroll-container" id="col-pending-review">
                {
                  this.state.data.map((item, idx) => {
                    if (item.ID === "5") {
                      return <DataCard cardData={item} key={idx} />
                    }
                  })
                }
              </div>
            </td>
            <td>
              <div className="scroll-container" id="col-plant-reviewed">
                {
                  this.state.data.map((item, idx) => {
                    if (item.ID === "4") {
                      return <DataCard cardData={item} key={idx} />
                    }
                  })
                }
              </div>
            </td>
          </tr>
        </tbody>
        </table>
      </div>
    )
  }
}


export default App;

It's just a one page table displaying info pulled in from an API. Meant to be displayed on a TV screen, so trying to get anything that overflows to auto scroll.

Answer 1

Try to declare a variable in state that counts the amount of scrolls. Then using this.setState() you can add one every time it the function is called. If it is a multiple of 2 , then scroll down. Else scroll up. To check if it is a multiple of 2, use % 2 .

CSS approach

You can also do this without React. When the user hovers over the non-overflowing columns, all of the columns will move downward. Once the user gets his mouse out of the non-overflowing columns then the columns will move up. I don't know if this is what you want or not.

Hope this helps!

Answer 2

It is probably better to make those scroll containers into React.Component's and move your scroll code there. This way you only will the scroll code when the component is updated, which is whenever a child element is added and not need a setTimeout. Here is what that would look like:

import React, { Component, useRef, useLayoutEffect } from 'react';

const ScrollColumn = ({children}) => {
  const scroller = useRef(null)
  const scrollColumn = () => {
    let el = scroller.current;
    if (!el) return

    if (el.scrollHeight - el.scrollTop === el.clientHeight) {
      el.scrollBy(0, -1);
    } else {
      el.scrollBy(0,1);
    }
  }

  useLayoutEffect(scrollColumn)

  return <div ref={scroller} className='scroll-container'>{children}</div>
}

class App extends React.Component {
  state = {
    data: []
  }

  componentDidMount() {

    axios.get('/data.json').then( res => {
      console.log(res)
      this.setState({data: res.data}) 
    })

  }

  render() {
    return(
      <div className="table-responsive">
        <ScrollColumn>
          {
            this.state.data.map((item) => (
              <DataCard cardData={item} key={item.id} />
            ))
          }
        </ScrollColumn>
      </div>
    )
  }
}