位置: IT常识 - 正文

CSS实现列表滚动效果(css滚动条自动滚动)

编辑:rootadmin
CSS实现列表滚动效果

推荐整理分享CSS实现列表滚动效果(css滚动条自动滚动),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css里面怎么设置为滚动形式,css 设置滚动,css3实现列表滚动,css怎么设置滚动图片,css表格滚动条,css里面怎么设置为滚动形式,css3实现列表滚动,css表格滚动,内容如对您有帮助,希望把文章链接给更多的朋友!

效果:

应用场景:

 1. 一个竖向列表(或横向列表)中有很多行,但是随着页面上下(或左右)滑动,整个列表会随之移动。

2.三级联动菜单,上下滑动的时候。

诸如此类...

在这里介绍一个css属性,overflow-y和overflow-x

CSS实现列表滚动效果(css滚动条自动滚动)

以以下代码为例:

<!DOCTYPE html><html><head><style>div{height: 450px;overflow-y: scroll;}</style></head><body><div><p>列表1</p><p>列表2</p><p>列表3</p><p>列表4</p><p>列表5</p><p>列表6</p><p>列表7</p><p>列表8</p><p>列表9</p><p>列表10</p><p>列表11</p><p>列表12</p><p>列表13</p><p>列表14</p><p>列表15</p><p>列表16</p><p>列表17</p><p>列表18</p><p>列表19</p><p>列表20</p><p>列表21</p><p>列表22</p><p>列表23</p><p>列表24</p><p>列表25</p><p>列表26</p><p>列表27</p><p>列表28</p><p>列表29</p><p>列表30</p></div></body></html>

关于overflow-y:

当一个块级元素(div 元素、p 元素之类的)的内容在垂直方向发生溢出时,CSS属性 overflow-y决定如何处理溢出的内容。

隐藏溢出内容(hidden),或者显示滚动条(scroll),或者直接显示溢出内容(visible),或者让浏览器来处理(auto)。

关于overflow-x:

当一个块级元素的内容在水平方向发生溢出时,CSS属性 overflow-x 决定应该截断溢出内容,或者显示滚动条,或者直接显示溢出内容。

值得一提的是,滚动的元素不可以浮动,但我们可以给滚动列表的这个大元素设置

overflow:hidden;

white-space:nowrap;

overflow-x: scroll;

避免出现设置好一切后,滚动无效的情况

本文链接地址:https://www.jiuchutong.com/zhishi/297631.html 转载请保留说明!

上一篇:Yolov5实例分割Tensorrt部署实战(yolov5实例分割原理详解)

下一篇:Python实现人工神经网络回归模型(MLPRegressor算法)并基于网格搜索(GridSearchCV)进行优化项目实战(如何用python制作人工智能)

  • 长期股权投资产生的投资收益属不属于非经常性损益
  • 企业收到银行汇票退回的多余款项
  • 旅游服务住宿费入什么科目
  • 小规模应交的增值税
  • 用现金购买办公设备会计分录
  • 融资融券与普通证券交易的区别体现在
  • 月末在产品和产成品计算
  • 收到银行退回的银行汇票多余款
  • 免费的企业
  • 投资项目的资本金的认缴
  • 营改增对建筑业的影响有哪些
  • 应交税金减免税金需要结转吗
  • 出口退税代理费用大概多少
  • 企业所得税如何申报操作
  • 收派服务费入什么科目
  • 机动车销售统一票据可以抵扣吗
  • 电器以旧换新的套路
  • 资本公积转增实收资本所有者权益会变吗
  • 购入低值易耗品计入什么科目
  • 企业取得代扣代缴个税手续费分录
  • 原材料入账价值合理损耗
  • 人力资源部报销购买办公家具款
  • 地税定额发票还要交税吗
  • 销项税多了冲销部分的怎么做账
  • 固定资产折旧计提时间
  • 支付费用没有发票怎么做账务处理
  • 隐藏登录界面的软件
  • 很有意思的一段话
  • 工程款清欠管理办法
  • 买支票需要带什么章
  • 360路由器怎么连接网络
  • 跨年庆典中燃放的歌曲
  • 一次还本分次付息的国债会计分录
  • 工商年报纳税总额包括滞纳金吗
  • chrome浏览器清除数据
  • yolo系列的优缺点
  • extract php函数
  • 社保单位当月应缴月报查询
  • 金蝶现金流量表不对怎么处理
  • 出口货物赠品如何申报
  • 综合所得汇算清缴是什么意思
  • 工会经费付款分录
  • 哪些人需要税务会计
  • 研发费用加计扣除的条件
  • 交易性金融资产入账价值怎么计算
  • 租车费报销管理规定
  • 税控盘会计分录怎么做
  • 水费能抵扣进项税吗
  • 实收资本的主要用途
  • 公司入账是什么意思
  • 高新技术企业享受优惠时间
  • 商业企业费用的计算方法
  • sql server 数据库介绍
  • sqlserver按时间段导出数据
  • 注册表被锁定后的处理方法
  • Windows Server 2016预览版10514系统镜像下载泄露
  • win8系统没有无线网络连接
  • linux系统中安装web服务
  • spoolsrv32.exe - spoolsrv32进程是什么文件 有何作用
  • gain_trickler_3202.exe 进程查询 gain_trickler_3202进程是什么文件
  • 华硕安装win7系统
  • 虚拟网卡在哪里设置
  • centos zsh
  • Linux中怎么安装nano已经有安装包了
  • linux快速查看目录大小
  • 为什么window10容易发热
  • windows资源管理器在哪个文件夹
  • unity ar sdk
  • 克隆本机系统
  • csm support
  • AppWidgetProvider使用介绍
  • unityui
  • js获取父窗口
  • js解析json字符串获取key
  • jquery里的each()是什么函数?你是如何使用他的?
  • 国家税务局天津市税务总局官网
  • 四川省成都市国池酒厂52度原浆多少钱一瓶
  • 辽宁国家税务局公务员职位2023
  • 营业执照每个季度申报吗
  • 2020年山东录取人数
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设