使用css实现炫酷的横屏滚动效果

炫酷的横屏滚动效果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标签都没法正常使用了,你可以手动为他们设定一个大小