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的可拖动按钮).
相关推荐
时光足迹14 分钟前
Tiptap 简单编辑器模版
前端·javascript·react.js
JSLove27 分钟前
nginx入门
前端·nginx
时光足迹28 分钟前
ThreeJS之GUI控制器
前端·javascript·three.js
时光足迹29 分钟前
Tiptap编辑器
前端·javascript·react.js
时光足迹33 分钟前
电子书阅读器之笔记高亮(跨段处理)
前端·javascript·react.js
Dabei36 分钟前
Android 副屏(Virtual Display)创建与悬浮窗画中画显示实战
前端·架构
Hello-Mr.Wang1 小时前
【保姆级教程】MasterGo MCP + Cursor 一键实现 UI 设计稿还原
前端·javascript·vue.js·ai编程
Dabei1 小时前
Android 无障碍服务实现美团/微信自动化:客户端开发实践
前端·设计模式
华超磊1 小时前
关于手动实现滚动的尝试
前端