现在的前端开发中,有许多页面上有设计了横向滚动,可以说横向滚动是一个很常见的场景,今天就来说说横向滚动怎么实现以及需要注意的问题。
实现横向滚动
要实现横向滚动,方式不止一种,这里我只说最简单的一种,其它太复杂的也没说的必要,其实只需要三个 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;
}
}