搜索

项目需求:

实现天气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 国际许可协议 进行许可。
1
查看目录

目录

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

染念

有你的生活真好~