摘要：单条消息的滚动显示只是把相框的高度设成单条消息的高度了，这样每拖动一条消息的高度，我们就只看到一条消息了。滚动的其他原理就不提了，这里只说说我对到底是如何实现滚动的理解。
作为前端的初学者我前天学到了如何用JavaScript中的scrollTop来实现消息滚动效果。消息的向上滚动实际上可以看做是我们把相框里面的照片给向上拖动，我们能看到的消息就只有相框里面的部分。单条消息的滚动显示只是把相框的高度设成单条消息的高度了，这样每拖动一条消息的高度，我们就只看到一条消息了。滚动的其他原理就不提了，这里只说说我对scrollTop到底是如何实现滚动的理解。
下面先贴上代码:
这里的area就是我前面说到的“相框”，con1和con2就是嵌在里面的“照片”。注意：调用scrollTop的是area，因为我们要动的东西是“相框”里面的内容。这段代码里面最重要的就是理解它到底是怎么实现循环滚动的。其中的关键就是复制语句和置零语，下面上图：
图1（ps：黑色框为area，红色框为con1）就是“相框”内的内容向上滚动到底就停止滚动了，即使继续增加area.scrollTop它也不会动，那我们就会想让它回到初始位置再重新向上滚动。就是变成下面这样：
图2就是我们消息滚动的初始状态，但是如果直接从图1跳到图2，我们的消息滚动就会变得不连贯，看着不舒服。怎么解决这个问题？那就用到了复制语句。
复制的内容con2和原内容con1一样，只是位于con1之后，关系如下图：
（ps:蓝色框为复制的con2）复制内容有什么用？接着往下看：
这一刻就是关键时刻，这个时候我们解决了图1中出现的尴尬局面，红色框可以继续向上滚动，因为框内的内容还没到底，而此时内容已经开始循环了，因为蓝色框的内容和红色框的内容一样。那这个时候我们再把红色框拿回到初始位置即把scrollTop置零，变回图3的状态（因为红色框和蓝色框都是黑框的内容，所以如果改变scrollTop的值，他们的位置会一起变化）。因为红色框和蓝色框顶部的内容一样，即使回到初始状态你也看不出来中间变化的过程。
（ps:如果有不明白具体是怎么实现的请看教程，信息滚动效果制作！）
第一次写这个，如有不足请多指教！谢谢！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78878.html
摘要：接下就说下我对滚动穿透问题解决方案探索的过程，希望对大家有点启发。心想来了突然意识到写弹窗的时候忘记处理滚动穿透的问题了。下期预告前端词典继承必懂知识点传送门前端词典代理的概念及其应用前端词典滚动穿透问题的解决方案 背景 产品有三宝，弹窗，浮层加引导； 设计有三宝，透明，阴影加圆角； 运营有三宝，短信，推送加红包； 程序员有一宝，这个做不了。 随着移动端市场的份额越大，需求就越多...
摘要：接下就说下我对滚动穿透问题解决方案探索的过程，希望对大家有点启发。心想来了突然意识到写弹窗的时候忘记处理滚动穿透的问题了。下期预告前端词典继承必懂知识点传送门前端词典代理的概念及其应用前端词典滚动穿透问题的解决方案 背景 产品有三宝，弹窗，浮层加引导； 设计有三宝，透明，阴影加圆角； 运营有三宝，短信，推送加红包； 程序员有一宝，这个做不了。 随着移动端市场的份额越大，需求就越多...
摘要：使用具有回弹效果的滚动当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 最近做了一个语音直播聊天的项目，有一个功能是当没有直播时，进入房间可以查看历史消息，滑动到顶部加载之前的历史消息，我用jquery scroll事件，来判断是否滚动到顶部，问题来了： 首先触发请求事件之后，prepend插入到当前列表之前，而prepen...
摘要：使用具有回弹效果的滚动当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 最近做了一个语音直播聊天的项目，有一个功能是当没有直播时，进入房间可以查看历史消息，滑动到顶部加载之前的历史消息，我用jquery scroll事件，来判断是否滚动到顶部，问题来了： 首先触发请求事件之后，prepend插入到当前列表之前，而prepen...
摘要：使用具有回弹效果的滚动当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 最近做了一个语音直播聊天的项目，有一个功能是当没有直播时，进入房间可以查看历史消息，滑动到顶部加载之前的历史消息，我用jquery scroll事件，来判断是否滚动到顶部，问题来了： 首先触发请求事件之后，prepend插入到当前列表之前，而prepen...
阅读 3569·2023-04-26 02:24
阅读 847·2023-04-25 14:47
阅读 2348·2021-11-24 11:16
阅读 1682·2021-11-24 09:38
阅读 1491·2021-11-18 10:07
阅读 2037·2021-09-22 15:49
阅读 1501·2019-08-30 15:55
阅读 807·2019-08-26 13:38
