微信推文无缝滚动是这样炼成的
来源 | 般若无界 作者 | 舒欣 效果展示 前两天我收到策划妹子的请求，需要在微信公众号里面做一篇推文。这个推文和以往不同，需要有两张图片无缝拼接，并且下方图片可以滚动的效果。 这个效果目前用微信自带的编辑器是无法实现的，毕竟功能有限，而这个需求也相对要小众一些。不过这个效果是很不错的，在微信推文中浏览会让人耳目一新。 从上图可以看出，首先是一张海报，乍一看没什么，以为就是一张图片。当你用手指滑动屏幕看下面内容时，你会惊奇的发现海报下半部分的内容时是可以滚动的，而且滚动到最底部后海报又回到了最初的状态。是不是很神奇？下面小编我将带你一探究竟！ 技术实现原理 之前我们技术部做过一个端午节的推文，和这个类似，只不过那个是上面滚动下面固定，而这个是反过来了。端午节的推文案例效果如下： 我仔细看了下源码，发现原理是类似的。这个技术的关键有两点，一是上下两张图要 无缝衔接 ，而且宽度要相同。 二是 图片固定区域滚动 ，下面的长图不能一开始全部显示出来，而是先显示开头的一部分，这一部分的高度是固定的。 下面的内容初始隐藏，只有通过滚动才会出现下面的内容。滚动到最下方的时候，会发现海报合上了，这里其实是一个障眼法，下方图片的底部正好是和顶部一样的图（只有文字提示不一样），这里对设计有特殊要求，第二种长图的顶部和底部的内容是要保持高度一致的，为了实现这个效果，好的设计是必不可少的