关于scrollTop的理解以及实现无缝滚动

目标：实现数据的自动滚动【无缝滚动】

scrollTop是什么？
实现无缝滚动

scrollTop是什么？

The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.

元素的scrollTop属性获取或设置【元素内容】垂直滚动的像素数

An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. 

元素的scrollTop值是从元素的顶端到其最顶端可见内容的距离的度量。也就是 卷起来的那段叫scrollTop。scrollTop里面包括了border的值

关于scrollTop的理解以及实现无缝滚动
举个例子：

//  css
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
 }
.outer {
	border:1px solid red;
	height: 100px;
	overflow: auto;
	margin-top: 30%
}

<body>
	<div class='outer'>
		<div>
			<p>111</p>
			<p>22</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
			<p>6</p>
			<p>7</p>
		</div>
	</div>
</body>

关于scrollTop的理解以及实现无缝滚动

关于scrollTop的理解以及实现无缝滚动
这里的 147-98 = 49， 98才是内容真正的高度！！！！

注意：就是滚动的最大范围是内容的height - 父元素的height

实现无缝滚动 react 版本

/*
 * @date: 2018/7/19.
 */
import React from 'react';
import  styles from './index.less';
import { Row, Col} from 'antd';

class ScrollTop extends React.Component {
  caluScroll = () => {
    if(this.myScroll) {
      clearInterval(this.myScroll)
    }
    let area=document.getElementById('boxsj');
    let ol1=document.getElementById('listsj');
    let ol2=document.getElementById('listCopy');
    area.scrollTop= 0 ;
    ol2.innerHTML= ol1.innerHTML;
    let  scroll =() => {
      if(area.scrollTop >= ol1.offsetHeight) {
        area.scrollTop = 0;
      }else {
        area.scrollTop ++
      }
    }

    this.myScroll = setInterval(() => {
      scroll()
    }, 50);

    area.onmouseover = () => {
      clearInterval(this.myScroll);
    };
    area.onmouseout = () => {
      this.myScroll = setInterval(() => {
        scroll()
      }, 50);
    }
  }
    componentWillReceiveProps (newProps) {
        if(newProps.data.length > 0) {
            this.caluScroll()
        }
    }
 componentDidMount() {
     if(this.props.data.length > 0) {
         this.caluScroll()
     }
 }
  componentWillUnmount() {
    this.myScroll &&  clearInterval(this.myScroll);
  }

  render () {
    const {data} = this.props;
    return (
      <div className={styles.wrapper}>
          <div className={styles.title}>
              <Row>
                  <Col span={9}>名称</Col>
                  <Col span={5}>区域</Col>
                  <Col span={4}>人数</Col>
                  <Col span={6}>开展时间</Col>
              </Row>
          </div>
        <div id={'boxsj'} className={styles.box}>
          <ul className={styles.listWrapper} id={'listsj'}>
            {
                data instanceof Array && data.map((item,index) => {
                return (
                  <li key={index}>
                    <Row>
                      <Col span={9}>{item.name}</Col>
                      <Col span={5}>{item.districtName}</Col>
                      <Col span={4}>{item.residentNumber }</Col>
                       <Col span={6}>{item.startTime }</Col>
                    </Row>
                  </li>
                )
              })
            }
          </ul>
          <ul className={styles.listWrapper} id={'listCopy'}></ul>
        </div>
      </div>
    )
  }

}

export default ScrollTop ;

// less
.wrapper {
  color: #FFFFFF;
    .title {
        font-size: 14px;
        padding: 5px 15px;
        color: rgb(122, 129, 134);
    }
  .box {
    position: absolute;
    top: 70px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  .listWrapper {
    margin: 0;
    li {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      padding: 10px 15px;
    }
  }

关于scrollTop的理解以及实现无缝滚动