标签:src image lex 进度 lin 效果 bubuko round style
我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是不知道你有没有看过一些横屏滚动的网站,这样的网站在一众竖屏网页中鹤立鸡群,很容易达到吸人眼球的效果.
花时间谷歌了一下,发现实现方法是真的不少,你可以用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布局(这个容错率好像比较高,我比较喜欢)
效果像这样:
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轴外的部分会被隐藏掉
<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标签都没法正常使用了,你可以手动为他们设定一个大小
标签:src image lex 进度 lin 效果 bubuko round style
原文地址:https://www.cnblogs.com/uturobako/p/css-horizon-scroll-pages.html