css overflow-x: scroll 滚动不展示/隐藏滚动条 /如何滚动

overflow-x:scroll 实现滚动效果

复制代码
.scroll{
		width: 300rpx;
		height: 100rpx;
        //超出部分隐藏
		overflow-x: hidden;
        //禁止换行
		white-space: nowrap;
        //显示滚动条
		overflow-x: scroll;
}

操作滚动条的伪类元素

复制代码
    ::-webkit-scrollbar --- 整个滚动条.
    ::-webkit-scrollbar-button --- 滚动条上的按钮 (上下箭头).
    ::-webkit-scrollbar-thumb --- 滚动条上的滚动滑块.
    ::-webkit-scrollbar-track --- 滚动条轨道.
    ::-webkit-scrollbar-track-piece --- 滚动条没有滑块的轨道部分.
    ::-webkit-scrollbar-corner --- 当同时有垂直滚动条和水平滚动条时交汇的部分.
    ::-webkit-resizer --- 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
相关推荐
gyx_这个杀手不太冷静2 分钟前
大人工智能时代下前端界面全新开发模式的思考(二)
前端·架构·ai编程
GreenTea16 分钟前
AI Agent 评测的下半场:从方法论到落地实践
前端·人工智能·后端
吴声子夜歌32 分钟前
Vue3——Vue实例与数据绑定
前端·javascript·vue.js
我是若尘1 小时前
Harness Engineering:2026 年 AI 编程的核心战场
前端·后端·程序员
weixin199701080162 小时前
《快手商品详情页前端性能优化实战》
前端·性能优化
IT_陈寒2 小时前
折腾一天才明白:Vite的热更新为什么偶尔会罢工
前端·人工智能·后端
AI茶水间管理员3 小时前
学习ClaudeCode源码之Agent核心循环
前端·人工智能·后端
CodeAI3 小时前
TailwindCSS 核心概念与实用技巧:从传统CSS到Utility-First迁移指南
css
挖稀泥的工人3 小时前
AI聊天界面的布局细节和打字跟随方法
前端·javascript·面试
竹林8183 小时前
从“连接失败”到丝滑登录:我用 ethers.js 连接 MetaMask 的完整踩坑记录
前端·javascript