关于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的值

举个例子：

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


	

		

			
111
			
22
			
3
			
4
			
5
			
6
			
7
		
	

这里的 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 (
      

          

              
                  名称
                  区域
                  人数
                  开展时间
              
          
        

          

            {
                data instanceof Array && data.map((item,index) => {
                return (
                  

                    
                      {item.name}
                      {item.districtName}
                      {item.residentNumber }
                       {item.startTime }
                    
                  
                )
              })
            }
          
          

        
      
    )
  }

}

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