位置: 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制作人工智能)

  • 小红书的阅读量可以有收益吗(小红书的阅读量是怎么算的)

    小红书的阅读量可以有收益吗(小红书的阅读量是怎么算的)

  • 荣耀60虚拟按键怎么设置(荣耀手机怎么把虚拟按键调出来)

    荣耀60虚拟按键怎么设置(荣耀手机怎么把虚拟按键调出来)

  • 苹果耳机左比右声音大(苹果耳机的左右耳机有区别吗)

    苹果耳机左比右声音大(苹果耳机的左右耳机有区别吗)

  • 小米手环4标准版和nfc的区别(小米手环4标准版功能)

    小米手环4标准版和nfc的区别(小米手环4标准版功能)

  • 网络计算属于计算机网络吗(网络计算是一种什么计算)

    网络计算属于计算机网络吗(网络计算是一种什么计算)

  • xs与xr的区别(苹果xs和xr的区别)

    xs与xr的区别(苹果xs和xr的区别)

  • 石墨烯电池和铅酸电池的区别(石墨烯电池和铅酸电池哪个好)

    石墨烯电池和铅酸电池的区别(石墨烯电池和铅酸电池哪个好)

  • 电视网线是接路由器还是猫(电视网线是接路由器还是墙)

    电视网线是接路由器还是猫(电视网线是接路由器还是墙)

  • qq空间访客记录最多显示几年前的(qq空间访客记录是怎么算的)

    qq空间访客记录最多显示几年前的(qq空间访客记录是怎么算的)

  • p40指纹识别不灵敏(p40指纹解锁不灵敏)

    p40指纹识别不灵敏(p40指纹解锁不灵敏)

  • 超文本和普通文本的最大区别是(超文本和普通文本的主要区别)

    超文本和普通文本的最大区别是(超文本和普通文本的主要区别)

  • wifi频率2.4ghz与5ghz的区别(wifi频率2.4ghz与5ghz哪个好)

    wifi频率2.4ghz与5ghz的区别(wifi频率2.4ghz与5ghz哪个好)

  • 小米8青春版快充多长时间(小米8青春版快充失效修复)

    小米8青春版快充多长时间(小米8青春版快充失效修复)

  • ipad2018能不能接键盘(ipad2018可以连接手机热点吗)

    ipad2018能不能接键盘(ipad2018可以连接手机热点吗)

  • 路由器的主要功能(路由器的主要功能是放大传输信号)

    路由器的主要功能(路由器的主要功能是放大传输信号)

  • 如何在word中画线写字(如何在word中画图形)

    如何在word中画线写字(如何在word中画图形)

  • vivo相册误删怎么恢复(vivo手机相册误删了怎么办)

    vivo相册误删怎么恢复(vivo手机相册误删了怎么办)

  • 三星note10 防不防水(三星note10防误触)

    三星note10 防不防水(三星note10防误触)

  • 苹果8plus长多少厘米(iphone8plus长度多少cm)

    苹果8plus长多少厘米(iphone8plus长度多少cm)

  • 苹果怎么取消200m限制(苹果怎么取消200m流量下载)

    苹果怎么取消200m限制(苹果怎么取消200m流量下载)

  • 怎么关闭好友热播(怎么关闭好友热搜)

    怎么关闭好友热播(怎么关闭好友热搜)

  • win7系统开机显示英文(win7开机显示启动项)

    win7系统开机显示英文(win7开机显示启动项)

  • 手机yy怎么脱马甲(yy怎么用手机脱马甲)

    手机yy怎么脱马甲(yy怎么用手机脱马甲)

  • 怎样让绿萝疯长,掌握这三点,让你的绿萝快速疯长!(让绿萝疯长的妙招)

    怎样让绿萝疯长,掌握这三点,让你的绿萝快速疯长!(让绿萝疯长的妙招)

  • 捐赠支出纳税调减
  • 境外培训费计入关税完税价格
  • 普票和增值税发票的区别
  • 期末留抵税额是怎么产生的
  • 企业所得税法
  • 职工个人所得税
  • 保险公司报销修手机
  • 垃圾处理费怎么算
  • 佣金可以入账吗
  • 收到投资款需要交税吗?
  • 公租房租金收入什么科目
  • 企业生产成本核算的一般程序为
  • 应纳税额计算举例
  • 子公司可否将母公司注销
  • 自助开税票流程
  • 绿化养护按什么项目交增值税
  • 房产税计税依据房产原值怎么算
  • 红字发票开具只能针对一份发票 不可以只冲红其中一部分吗?
  • 会计对帐是银行账户吗
  • 企业装修期间开工怎么办
  • 公户以借款形式打款给个人,对个人有影响么?
  • 金蝶k3初始余额录入打不进字
  • 单位低价向职工售房个人所得税计算
  • 老板垫付的货款怎么做凭证?
  • 税务局手续费返还
  • 劳务发票税率是多少
  • 股东个人财产转让流程
  • u盘安装pe系统
  • 研发费用没有发票可以加计扣除吗
  • 先支付后收到发票怎么做账
  • 小程序码生成器在线制作
  • 前端字符长度限制
  • 建筑业主营业务收入二级科目有哪些
  • 登记会计账簿的作用
  • vue定位城市
  • 厂房改造支出可以计入厂房价值吗
  • php图片识别处理归类
  • php gzip压缩
  • 数据挖掘和数据分析的区别与联系
  • Laravel+jQuery实现AJAX分页效果
  • 帝国cms图片显示不了
  • hashmap 面试
  • 接受捐赠收入要缴纳企业所得税吗
  • 过路费报销计入什么科目
  • 合伙开网吧需要什么手续
  • 国外差旅费怎么入账
  • sqlserver2016维护计划
  • 企业内部交易如何操作
  • 小企业会计准则适用范围
  • sql中order by的用法
  • 投资管理公司成立的请示范文
  • 社保缴费基数怎么算
  • 员工福利费属于什么会计科目
  • 合同履约成本如何设置明细科目
  • 用于不动产的进项税额
  • 外资企业所得税优惠政策
  • 公司员工聚餐属于什么费用
  • 事业单位其他特殊人员医疗保障是什么意思
  • 公司网站维护费用计哪个科目
  • 出纳提取现金的业务流程
  • 如何科学设置运动负荷
  • win8分盘怎么分
  • xp系统如何做
  • ati2plab.exe是什么进程 ati2plab进程安全吗
  • win10wifi总是掉线
  • ssh密钥根据什么生成
  • mac 安卓系统
  • unity常用代码
  • php守护进程的应用场景
  • android电话簿
  • js构造器constructor
  • 安卓手机图片缓存在哪
  • 2023年最新税率一般纳税人
  • 国家税务总局定额发票查验平台官网
  • 高速公路过路费一公里多少钱
  • 苏州买房退契税政策2023
  • 山东省水资源税征收标准
  • 如何理解税收的本质
  • 浙江网上税务局申报
  • 到税务局领购免税产品
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设