染念Blog

项目需求:

实现天气24小时预报,类似于华为等天气app,有个可以滑动的区域

完成效果

QQ截图20210522225323.png
QQ截图20210522225330.png

分析

在web中,我们要实现滚动特效,只需要设定一个高度or宽度,然后使用overflow: scroll;就可以出现一个滚动条了。
那么同理,我们这边也这么实现。

.nav {
  // 因为要水平滚动,可以设置100%
  width: 100%;
  // 水平不换行!!!实现关键
  white-space: nowrap;
  // 出现水平方向的滚动条
  overflow-x: scroll;
  // 如果溢出高度不够,就要隐藏,
  overflow-y: hidden;
}

如此实现,那么你就基本实现了水平滚动
但是有个滚动条就有点丑,不要怕,只需要隐藏就好了

.nav::-webkit-scrollbar {
 display: none;
}

版权属于:染念
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
更新于: 2021年05月22日 23:01
5
发表评论

目录

来自 《纯css实现滚动(滑动)区域》

染念

Big高性能计算、small前端...
164 文章数
607 评论量
4 分类数
168 页面数
已在风雨中度过 5年357天12小时33分
© 2023 染念Blog
浙ICP备19020194号-1
© 2023 染念Blog
浙ICP备19020194号-1