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

Question

我在一个表中有多个列超过了屏幕高度，而有些列没有，所以我试图让溢出的列自动向下滚动以显示所有数据，然后重复向上滚动。

我尝试了一个递归函数，比如：

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);
}

然而，我得到的最大调用堆栈大小超过了错误。适用于非React代码，但不适用于React。

编辑

完整代码。

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;

这只是一个一页的表格，显示从API获取的信息。本想显示在电视屏幕上，所以尝试将溢出的内容自动滚动。

Answer 1

尝试在state中声明一个计算滚动量的变量。然后使用this.setState()，每次调用函数时都可以添加一个。如果是2的倍数，则向下滚动。否则向上滚动。要检查它是否是2的倍数，请使用% 2。

CSS方法

您也可以在没有React的情况下完成此操作。当用户将鼠标悬停在未溢出的列上时，所有列都将向下移动。一旦用户将鼠标从未溢出的列中移出，这些列就会向上移动。我不知道这是不是你想要的。

希望这能有所帮助！

Answer 2

最好将这些滚动容器放入React.Component中，并将滚动代码移动到那里。这样，您只会在组件更新时滚动代码，即在添加子元素时，不需要setTimeout。以下是它的样子：

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>
)
}
}