炫酷的横屏滚动效果css实现
DEMO: https://codepen.io/kobako/pen/BxVLLm
我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是不知道你有没有看过一些横屏滚动的网站,这样的网站在一众竖屏网页中鹤立鸡群,很容易达到吸人眼球的效果.
花时间谷歌了一下,发现实现方法是真的不少,你可以用inline-block加上no-wrap,也可以用rotate将整个页面或者div旋转(不过我对这个是真的苦手,看不懂).看了那么多,尝试总结一下最简单也最能令人接受的方法吧
首先你需要一个div容器,和很多你想要令其横屏滚动的pages
<div class="container"> ?<div class="page" style="background-color: red">page1</div> ?<div class="page" style="background-color: green">page2</div> ?<div class="page" style="background-color: blue">page3</div> ?<div class="page" style="background-color: yellow">page4</div></div>我给他们每个div加上了背景颜色,在布局的时候这种做法是非常好用的
现在我想要将每一个page最大化到适应整个屏幕,像这样
所以添加css:
.page { ?height: 100vh; ?width: 100vw;}这里的vh和vw似乎是html5才有的单位,数字代表元素占整个视窗的百分比
你可以看到每个page都占满了整个屏幕,滚动条是垂直的.现在我提供两种方式来将他们横屏滚动.第一种的思路是用大家可能比较熟悉的inline-block,第二种是用flex布局(这个容错率好像比较高,我比较喜欢)
inline-block方式
效果像这样:
css:
<style>body{ ?margin: 0;}.container { ?white-space: nowrap; ?height: 100vh; ?overflow-y: hidden;}.page { ?width: 100vw; ?height: 100vh; ?display: inline-block;}</style>首先为container加上white-space: nowrap,为page加上inline-block样式，这样页面就不会换行而是横向排列
这里将container限定高度为整个视窗然后应用overflow-y属性,这样一来,就看不到难看的y轴滚动条了,因为超出视窗y轴外的部分会被隐藏掉
flex方式
<style>body{ ?margin: 0;}.container { ?display: flex; ?flex-wrap: nowrap; ?height: 100vh; ?overflow-y: hidden;}.page { ?flex: 0 0 auto; ?width: 100vw; ?height: 100vh; }</style>个人比较喜欢flex方式.如果你复制上面的代码去实际试一试的话,就会发现inline block方式存在一个问题:相邻两个page中间会有一条很细的沟
这条沟不是padding或者margin造成的,就像浏览器对待文字的时候,会自动在两个字之间加上一条沟,让你看得更舒服,这是浏览器的默认行为.当然,也是有解决方法的,有兴趣的可以看看
.container{ ?... ?font-size: 0;}.page { ?... ?font-size: 12px;}将父容器的字体大小设为0,就能解决沟的问题.但是这样一来,你需要为page设定一个字体大小,并且底下的所有h标签都没法正常使用了,你可以手动为他们设定一个大小
使用css实现炫酷的横屏滚动效果
原文地址：https://www.cnblogs.com/uturobako/p/css-horizon-scroll-pages.html