H5移动端css实现向右横向滚动功能
七娃博客2,871人阅读
移动端屏幕很小，为了呈现更多的内容，并占用更小的空间，但是又不能影响正常阅读，就出现了现在潮流的设计手法：十字交互法则，卡片横向无限滚动就是其诞生的排版布局之一，不过十字交互最初是在大屏端（电视UI）出现的，随着设计的不断演变，现在在APP，H5设计中也经常见到其身影。
大屏设计：
app设计：
那么对于这样的ui，H5页面中，前端怎么最简单的实现其功能呢？
首页原理：父级盒子定义可横向滑动，不允许子元素换行，子元素全部设置为行内块即可实现！
overflow-x: scroll; -webkit-overflow-scrolling:touch;display: -webkit-box;white-space: nowrap;
子元素全部设置为行内块：
display: inline-block;
这样就能实现这样的布局效果了，其中最重要的一定就是 父元素不允许子元素换行white-space: nowrap的妙用了，初级前端都对这个标签不熟悉，看这《white-space 设置或检索对象内 “空格” 的处理方式》
[…] 在上一篇《H5移动端css实现向右横向滚动功能》我们已经介绍过横向滚动的发展史，那么小程序也可以用h5的代码实现横向向右滚动的效果，这个方法就不再啰嗦，能实现，这篇文章说一下第二种微信小程序自带的方法：scroll-view标签。 […]