Question

我开发了一个滚动组件，该组件在总共7000个时间内呈现20条记录。我可以使用什么属性来正确定位滚动？有7000行，所以滚动应该向下移动'慢'，因为有很多行。

Reactjs组件：

import React, {Component} from 'react';

class Scroll extends Component {

    constructor(props) {
        super();
        this.props = props;
        this.state = {position: 0, pageSize: 20, displayedNames: this.props.names.slice(0, 20)}
    }

    onScroll = (event) => {
        if (event.nativeEvent.wheelDelta > 0) {
            console.log('scrollup');

            if (this.state.position >= this.state.pageSize) {
                this.setState({position: this.state.position - this.state.pageSize},
                    () => {
                        console.log('this.state.position=', this.state.position);
                        this.setState({displayedNames: this.props.names.slice(this.state.position, this.state.position + this.state.pageSize)});
                    });
            }

        } else {
            console.log('scroll down');
            if (this.state.position <= 7000) {
                this.setState({position: this.state.position + this.state.pageSize},
                    () => {
                        console.log('this.state.position=', this.state.position);
                        this.setState({displayedNames: this.props.names.slice(this.state.position, this.state.position + this.state.pageSize)});
                    });
            }

        }

    }

    render() {
        let display = this.state.displayedNames.map
        (
            (name) =>
            {
                if (name !=='')
                {
                    return <div>{name}</div>
                }
            }



    )

        return (
            <div id='container' onWheel={this.onScroll}>
                <div className="scroll">
                    {display}
                </div>
            </div>
        );
    }
}


export default Scroll;

的CSS：

#container{
    height: 350px;
    width:350px;
     overflow-y: scroll;
    border: 1px solid black;
}

Answer 1

如果您想要平滑滚动步骤，则应该向后或向前跳转一个项目。为什么不使用onScroll事件？

我重新创建了你的例子并从状态中删除了东西。 Scroll需要维护的唯一状态信息是位置。您可以使用Math.min和Math.max来避免位置超出允许范围。

请注意，应用程序提供了配置和数据，在此我将scrollStep设置为1

<强> App.js

import React from 'react';
import Scroll from './Scroll';

const App = props => {
  let names = [];
  for (let i = 1; i <= 7000; i++) {
    names.push('stackoverflow ' + i);
  }

  return (
    <div className="app">
      <Scroll names={names} displayItems={20} scrollStep={1} />
    </div>
  );
};

<强> Scroll.js

import React from 'react';

export default 
class Scroll extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      position: 0
    };
  }

  onScroll = event => {

    const {scrollStep, names, displayItems} = this.props;

    if (event.nativeEvent.wheelDelta > 0) {
      console.log('scrollup');        

      this.setState({ 
          position: Math.max(
            this.state.position - scrollStep, 0)
        });
    } else {
      console.log('scroll down');

      this.setState({ 
        position: Math.min(
          this.state.position + scrollStep, names.length - displayItems) 
      });
    }
  };

  render() {

    let displayedNames = this.props.names.slice(
      this.state.position,
      this.state.position + this.props.displayItems
    );

    console.log('this.state.position:', this.state.position);

    return (
      <div className='container' id="container" onScroll={this.onScroll}>
        <div className="scroll">{displayedNames.map(
          (name, index) => <div key={index}>{name}</div>)}
        </div>
      </div>
    );
  }
}

修改

如果您正在考虑调整滚动条的拇指大小，则可以将计算的填充值应用于滚动元素。（使用css可能会有一些设置高度技巧）。浏览器根据DOM内容自动呈现滚动条。浏览器不知道你有7000个项目。它只知道你有displayItems这是20项。通过在滚动元素的顶部或底部应用填充值，可以确保它看起来像有7000个项目。

修改2

我重新创建了一个更好的示例，其中滚动条是可用的，可以在这里看到 https://codepen.io/kunukn/full/JOZybL/

如何设置反应组件的正确滚动位置？

1 个答案: