css 在ReactJs中自动上下滚动表

olqngx59  于 4个月前  发布在  React
关注(0)|答案(1)|浏览(97)

我有一个表,其中有多行,是可滚动的。我一直试图添加一个功能,自动垂直滚动的表组件加载后,所以用户不必手动滚动。下面是我所做的工作到目前为止。

componentDidMount() {
 
      var tableContainer = document.querySelector("tbody");

      function autoScroller(){
          var sTop = tableContainer.scrollTo(top);
          var sDown = tableContainer.scrollHeight - tableContainer.clientHeight;
          tableContainer.animate({scrollTop:sTop < sDown/2 ? sDown : 0}, 4000, autoScroller);
      }
      autoScroller();
   }
    
   render(){

   return(

            <div className="tableContainer">
               <table className="table table-striped table-dark">
                    <thead>
                       <tr>
                        <th>Table Header</th>
                      </tr>
                     </thead>   
                        <tbody>
                          <tr><td>row 1</td></tr>
                          <tr><td>row 2</td></tr> 
                          <tr><td>row 3</td></tr> 
                          <tr><td>row 4</td></tr> 
                          <tr><td>row 5</td></tr> 
                          <tr><td>row 6</td></tr> 
                          <tr><td>row 7</td></tr> 
                          <tr><td>row 8</td></tr>       
                        </tbody> 
                  </table>   
              </div>

   )
   }

字符串
和CSS

table thead tr th{

  position: sticky;
  top: 0;
  background-color: gray;
}

.tableContainer {  
  height:20vh ;
  overflow-y: scroll;
  margin-bottom: 15px;

}

cig3rfwq

cig3rfwq1#

这样的东西可能会起作用:

import React from 'react';
import './Table.css';
import $ from 'jquery';

export default class Table extends React.Component {

  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
    this.interval = null;
    this.scrollIndex = 0;
  }

  componentDidMount() {
    this.startScrolling();
  }

  startScrolling() {
    this.interval = setInterval(() => {
      const container = this.containerRef.current;
      if (container === null) return;
      
      const containerHeight = container.clientHeight;

      const rows = container.querySelectorAll("tr");
      const nChildren = rows.length;
      const rowHeight = rows[0].clientHeight;

      const theadHeight = container.querySelector("thead").clientHeight;

      const nRowsVisible = Math.floor(containerHeight / rowHeight);
      this.scrollIndex = this.scrollIndex + nRowsVisible >= nChildren ?
        0 :
        this.scrollIndex + nRowsVisible

      // Jquery animate is a bit smoother than scrollTo, but either works
      // container.scrollTo({top: this.scrollIndex * rowHeight - theadHeight, behavior: "smooth"});
      $(container).animate({scrollTop: this.scrollIndex * rowHeight - theadHeight}, 1000);
    }, 4000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div className="tableContainer" ref={this.containerRef}>
        <table className="table table-striped table-dark">
          <thead>
            <tr>
              <th>Table Header</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>row 1</td></tr>
            <tr><td>row 2</td></tr>
            <tr><td>row 3</td></tr>
            <tr><td>row 4</td></tr>
            <tr><td>row 5</td></tr>
            <tr><td>row 6</td></tr>
            <tr><td>row 7</td></tr>
            <tr><td>row 8</td></tr>
          </tbody>
        </table>
      </div>

    )
  }
}

个字符
我有相同的用例,并首先实现了上面的方法。我后来需要一个更连续/循环滚动,我最终实现了w/ CSS动画(实现可以看到here)。
我刚刚发布了一个react组件到npm,如果它可能符合您的需求:react-auto-scroll-table

相关问题