H5 实现横向滚动的方法及需要注意的地方

现在的前端开发中，有许多页面上有设计了横向滚动，可以说横向滚动是一个很常见的场景，今天就来说说横向滚动怎么实现以及需要注意的问题。

实现横向滚动

要实现横向滚动，方式不止一种，这里我只说最简单的一种，其它太复杂的也没说的必要，其实只需要三个 CSS 属性就能搞定

/*横向滚动*/
.scroll-x{display: flex;flex-wrap: nowrap;overflow-x: auto;
}

给父容器加上上面的 CSS 就能实现横向滚动，是不是 so easy，而且现在都 2019 了，也不需要考虑 flex 的支持问题，（IE 已被自动忽略，，，）

文字怎么自动换行了

在用了上面的 CSS 后发现横向滚动的功能是有了，但文字怎么自己换行了，比如下面这样的

在检查及尝试了各种属性无果后，还是需要借助万能的 Google 来帮我解决问题，一通 Google 之后，发现只需要给父容器加一个属性就可以解决问题

white-space: nowrap;

加上这个之后就正常了，那么这是为什么呢，援引下原文章的解释，

对于white-space，item在没有用white-space:nowrap时，发现一个问题，在未设定宽度的情况下，一个单词不会换行，而汉字会换行，认为是和display:flex有关系，上网查阅，才知道：white-space是看空格来识别是否换行的，单词是作为一个字符，所以要针对于汉字和英文，都要设置white-space:nowrap不换行。因为汉字和英文的不同，导致所占的宽度不一致，所以要留1到2个像素。

去除滚动条

效果实现了，下面就是优化了，在实现了横向滚动功能后，大部分产品都会要求把滚动条给去掉，那么怎么去掉呢，也很简单

/*去除滚动条*/
::-webkit-scrollbar {display: none;
}

Demo

下面给出一个 Demo 的代码，就是做一个简单的横向滚动的导航条，如下图

代码如下：

<div class="scroll-x tabs"><div class="tab"><p>标签1</p><div class="indicator"></div></div><div class="tab"><p>标签1</p><div class="indicator"></div></div><div class="tab"><p>标签1</p><div class="indicator"></div></div><div class="tab"><p>标签1</p><div class="indicator"></div></div><div class="tab"><p>标签1</p><div class="indicator"></div></div><div class="tab"><p>标签1</p><div class="indicator"></div></div></div>

.tabs{height: 100px;line-height: 100px;padding: 0 10px;font-size: 50px;margin-bottom: 30px;.tab{padding: 0 20px;}.indicator{width: 20px;height: 4px;background: #1EAB42;margin: -4px auto 0 auto;}}

H5 实现横向滚动的方法及需要注意的地方相关推荐

纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生
纯html+css固定表格一列或多列,其余进行横向滚动的方法工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
html表格的列并列,纯html+css固定表格一列或多列，其余进行横向滚动的方法-鹏仔先生...
纯html+css固定表格一列或多列,其余进行横向滚动的方法工作时候,遇到一个需求,表格的前两列固定不动,其他的跟随滚动条滚动,并没有在意,想起来很简单,刚开始想法是前两列absolute定位,后面 ...
html禁止页面左右滑动,js阻止移动端默认事件以及只阻止横向滚动事件方法
js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动 ...
CSS - 实现横向滚动（横向滚动布局）
前言横向滚动需求很常见,实现起来也很容易. 如下图所示,PC 端是用鼠标拖动滚动条,H5 移动端是手指滑动: 解决方案上述效果图的完整代码如下,一键复制运行起来即可. 核心三要素: 父元素设置 w ...
html 图片自动滚动播放,JS实现图片自动滚动(图片横向滚动)
实带道术用量确示常构端析以要效开的用,近不现的效果就是一排图片自动横向滚动,鼠标指向的时候,暂定滚动,鼠标离开,继续滚要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高 ...
H5移动端css实现向右横向滚动功能
移动端屏幕很小,为了呈现更多的内容,并占用更小的空间,但是又不能影响正常阅读,就出现了现在潮流的设计手法:十字交互法则,卡片横向无限滚动就是其诞生的排版布局之一,不过十字交互最初是在大屏端(电视UI) ...
当h5页面横向不能滚动，如何优雅的显示表格数据
背景 h5项目中经常会出现"使用协议/隐私政策".这些内容一般都是服务端给返回的富文本. 问题一般协议中难免会出现表格等形式展示更多的信息.但是对于产品人员或者法务人员给我们的富 ...
【H5】文字横向滚动
相关知识:H5基础,css基础,js基础转载注明本文出处即可本文共分为三部分:分别为gif演示,原理解析,实现步骤源代码请点击文末链接下载个人才疏浅陋,若有错误请谅解. 目录一.gif演示 ...
h5，移动端浏览器通过css 实现页面，元素横向滚动
横向滚动在业务中还是比较常见的,比如我们的有些导航就是横向滚动的. 横向滚动其实通过css就是简单的快速实现核心的代码就是这两行 overflow-x: scroll; 开启滚动 white-sp ...