纯css实现滚动(滑动)区域

简介: 项目需求:实现天气24小时预报,类似于华为等天气app,有个可以滑动的区域完成效果

项目需求:

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

完成效果

2049810482.png

分析

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

那么同理,我们这边也这么实现。

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

如此实现,那么你就基本实现了水平滚动

但是有个滚动条就有点丑,不要怕,只需要隐藏就好了

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


目录
相关文章
|
5天前
CSS3滑动轮播动画
CSS3滑动轮播动画
18 8
|
1月前
|
前端开发 JavaScript API
|
4月前
|
前端开发
css大屏滚动展示样式
css大屏滚动展示样式
20 0
|
4月前
|
前端开发
CSS实现隐藏滚动条但是可以滚动
CSS实现隐藏滚动条但是可以滚动
22 0
|
4月前
|
前端开发
css滚动到顶部自动固定
css滚动到顶部自动固定
|
4月前
|
前端开发
前端切图:CSS实现隐藏滚动条同时又可以滚动
前端切图:CSS实现隐藏滚动条同时又可以滚动
24 0
|
6月前
|
前端开发
css改变滚动条的颜色-横向滚动demo效果示例(整理)
css改变滚动条的颜色-横向滚动demo效果示例(整理)
|
6月前
|
前端开发 容器
CSS——scroll-snap滚动捕捉的一些属性
CSS——scroll-snap滚动捕捉的一些属性
|
7月前
|
前端开发 容器
使用css实现文字横向滚动循环
要实现文字横向滚动循环效果,可以使用 CSS 的动画和@keyframes关键帧来创建。下面是一个示例,演示如何使用 CSS 实现文字的横向滚动循环:
277 0
|
9月前
|
Web App开发 前端开发 JavaScript
css黏性定位-实现商城的分类滚动的标题吸附
css黏性定位-实现商城的分类滚动的标题吸附
82 0

相关产品

  • 云迁移中心