- 页面滚动实现思路
- 页面无缝滚动实现思路
- 两者关联
页面滚动实现思路
（1）首先要做一个容器当做父元素，用来放你要滚动的内容，设置成相对定位
（2）定义一个子元素设置成绝对定位，目的是要脱离文档流，为下一步做准备
（3）js部分，设置一个setInterval定时器，每隔多久调用一次方法，这个方法是多久移动一次子元素的位置，这时候用js获取这个元素style中的top，用css也可以用top来改变子元素的位置，这一步用js来实现，不断改变top的值，我们就看到了子元素不断的向上移动。
注意：元素脱离文档流是其他元素的布局排版不会收到这个元素的影响，就当这个元素不存在。
脱离文档流有三种方式：absolute、float、fixed，这三种也有区别：
absolute：定位取决于它的父元素有没有定位，如果有那么它就根据定位的父元素定位，如果没有就会一级一级的向上找，直到找到body。
float：它脱离文档流的时候其他元素仍然会当这个元素不存在，但是其他元素盒子中的文本仍然会环绕在这个元素周围。
fixed：以窗口左上角为原点定位，定位之后相对于窗口的位置始终不变。
实现代码:https://juejin.im/editor/posts/5b4b43036fb9a04fbc21e5f0
无缝滚动实现思路
（1）首先做一个容器用来放滚动元素，这里不需要脱离文档流，也就是不需要相对定位、绝对定位、父元素，但是必须要要有滚动条，也就是overflow这个css样式，滚动到底部就不会继续滚动，scrolltop越大说明滚动条向下滚动元素向上滚动，越小说明滚动条向上元素向下滚动。
（2）需要将side1复制一份给side2，因为当元素滚动到底部的时候设置scrolltop为0，页面就会重新滚动不是无缝滚动，复制一份给side2，当side2滚动到side1初始位置时将scrolltop设置为0，因为时间短就看不出是重新滚动，显示的是无缝滚动，这里有个问题假设只有两条数据无法超出容器高度时就会显示重复数据，所以要加个判断。
实现代码：https://juejin.im/editor/drafts/5b4b48c1f265da0fab400c13
用css3动画实现思路
利用transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
（1）首先做一个容器用于放要操作的元素，这个元素不需要绝对定位也不需要相对定位，因为在移动的过程中这个元素原本的位置是一直存在的，在移动过程中有点像相对定位不会影响到别的元素。实现代码：
--move
dom.style.transform = 'translateY('+(50*move)+'px)'
dom.style.transition = '2s'
外面再加一层定时器就可以了
两者关联
前者实现的是让元素移动，而后者是让元素滚动
前者是让元素位置发生改变，脱离文档流。后者是利用滚动条让元素发生滚动，两者都可以实现对方
前者获取移动距离用offse,后者获取滚动距离用scroll，讲解如下
offsetTop、offsetLeft、scrollTop、scrollLeft区别
1.offsetTop：当前对象到其父级顶部的距离，不能对其赋值，只能获取值，设置对象到其父级顶部的距离用style.top
2.offsetLeft：当前对象到其父级左边的距离，不能对其赋值，只能获取值，设置对象到其父级左边的距离用style.left
3.scrollTop：对象最顶部到对象在当前窗体显示的范围内的顶边距离，即出现纵向滚动栏的情况下，滚动栏滚动的距离
4.scrollLeft ：对象的最左边到对象在当前窗体显示的范围内的左边的距离，
即是在出现了横向滚动栏的情况下，滚动栏拉动的距离。
参考https://www.cnblogs.com/zfyouxi/p/3797702.html
网友评论