知识点：onmousewheel，addEventListener，scrollTo，setTimeout
过程：
1.body 宽，高钉死，100vw，100vh，overflow：hidden 使得不出现滚动条，不然不好看
2.图片放进去，排起来，（注意：默认空隙的处理，可以使用flex布局，空隙就不见了）
3.制作相对于视窗的按钮，几张图片就几个按钮，（position: fixed计算一下高度，可以利用calc计算top使得上下居中）
4.美化一下，css写写
5.先写简单的按钮事件
6.写监听滑动事件(onmousewheel在火狐无效，DOMMouseScroll只在火狐有效)
react在componentDidMount的时候监听
7.补充写一下火狐的
9.测试检查一下。
完成啦，啦啦啦～
我的截图：
缺点：这里我是一直对页面进行监听，导致滑动过快对时候动画效果开始执行对时间延后。体现为滑动对轻，整个就流畅一点。
ps：写这种带计算带页面，我觉得是考验思维的，你可以对这里的知识点不熟练，但是你必须得能理解每一步的加加减减。
代码帮你改了，希望对你有帮助<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>连续滚动示例</title>
</head>
<body>
<script>
var fn = new Object()
fn.param = "要带的参数"
fn.initScrolling = function(){
alert(fn.param)
scrollingBox = document.getElementById('xst')
scrollingBox.style.overflow = "hidden"
scrollingInterval = setInterval("scrolling()",50)
scrollingBox.onmouseover = over
scrollingBox.onmouseout = out
}
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false)
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn)
}
}
addEventSimple(window,'load',fn.initScrolling)
var scrollingBox
var scrollingInterval
var reachedBottom=false
var bottom
function scrolling(){
var origin = scrollingBox.scrollTop++
if(origin == scrollingBox.scrollTop){
if(!reachedBottom){
scrollingBox.innerHTML+=scrollingBox.innerHTML
reachedBottom=true
bottom=origin
}else{
scrollingBox.scrollTop=bottom
}
}
}
function over(){
clearInterval(scrollingInterval)
}
function out(){
scrollingInterval = setInterval("scrolling()",50)
}
</script>
<div id="xst" style="width:289pxheight:163px">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</div>
<input type="button" value="测试" onclick="fn.initScrolling()"/>
</body>
</html>
当浏览器滚动条滚动时会触发 onscroll 事件，通常情况下指上下滚动条滚动。需要注意的是，浏览器一旦检测到滚动条发生滚动，就可以触发 onscroll 事件，而无需等到滚动行为结束。
下面的例子演示了一个极普遍的应用：利用 onscroll 事件检测滚动条位置，当向下滚动到一定位置时，在页面右下角会出现“返回顶部”的锚链接，以方便网站用户快速返回顶部。
