移动端屏幕很小,为了呈现更多的内容,并占用更小的空间,但是又不能影响正常阅读,就出现了现在潮流的设计手法:十字交互法则,卡片横向无限滚动就是其诞生的排版布局之一,不过十字交互最初是在大屏端(电视UI)出现的,随着设计的不断演变,现在在APP,H5设计中也经常见到其身影。

大屏设计:

H5移动端css实现向右横向滚动功能-Qui-Note

H5移动端css实现向右横向滚动功能-Qui-Note

app设计:

H5移动端css实现向右横向滚动功能-Qui-Note

那么对于这样的ui,H5页面中,前端怎么最简单的实现其功能呢?

首页原理:父级盒子定义可横向滑动,不允许子元素换行,子元素全部设置为行内块即可实现!

父级css溢出不换行,横向滚动代码:

overflow-x: scroll; -webkit-overflow-scrolling:touch;display: -webkit-box;white-space: nowrap;

子元素全部设置为行内块:

display: inline-block;

这样就能实现这样的布局效果了,其中最重要的一定就是 父元素不允许子元素换行white-space: nowrap的妙用了,初级前端都对这个标签不熟悉,看这《white-space 设置或检索对象内 “空格” 的处理方式