【css】css自定义div的滚动条宽度

2023-11-15

需要通过对应浏览器的伪元素来修改:

点击这里查看:主流浏览器对应伪元素简介链接地址!

示例代码(针对google类webkit内核浏览器):

<div class="scrollDiv"></div>
.scrollDiv {
  max-height: 300px;
  overflow-y: scroll;
}

css写法

.scrollDiv::-webkit-scrollbar {
  width: 4px;
}
.scrollDiv::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
}

less写法

.scrollDiv {
  &::-webkit-scrollbar {
	width: 4px;
  }
}
.scrollDiv {
  &::-webkit-scrollbar-thumb {
	background-color: #d9d9d9;
  }
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【css】css自定义div的滚动条宽度 的相关文章

  • 有没有模拟 Facebook 游览的 jQuery 插件?

    我指的是 Facebook 游览 可能使用开箱即用的 Facebook CSS 我已经知道这两个 http tympanus net codrops 2010 12 21 website tour http tympanus net cod
  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • 位置:绝对在边框半径内且溢出:隐藏

    我遇到了问题border radius在webkit浏览器中找到了解决方案 网址如下 如何在 Chrome Opera 中使 CSS3 圆角隐藏溢出 https stackoverflow com questions 5736503 how
  • 如何使用 Materialise 创建具有居中对齐链接的导航栏?

    我正在尝试使用 Materialise 构建一个顶部有导航栏的 1 页垂直滚动网站 现在 Materialize 仅具有用于向左或向右对齐链接的类 徽标可以居中对齐 但不能居中对齐链接本身 我一直在向 UL 和包装 div 添加中心对齐和中
  • 获取一行中的最后一个 li jQuery

    我们有一个简单的ul ul li some text li li some some text li li text more li li text here li ul ul text align center width 100px l
  • 图表js不显示

    我正在尝试使用 Charts js 创建一个简单的折线图 当我运行下面的代码时 没有出现图表 我究竟做错了什么 我正在关注这个教程http www chartjs org docs latest getting started http w
  • 如何使用 javascript/ASP.NET/CSS 旋转和淡入淡出背景图像

    我需要随机淡入淡出背景图像 这将是一个定时函数 例如每 5 秒一次 我需要使用 ASP NET Javascript CSS 或全部三者来完成此操作 请大家帮帮我 谢谢 Cycle 一个 jQuery 插件 是一个非常灵活的图像旋转解决方案
  • 如何从矩形点计算旋转角度?

    我有4分1 2 3 4闭合一个矩形 这些点按以下方式排列在数组中 x1 y1 x2 y2 x3 y3 x4 y4 我遇到的问题是矩形可以旋转一定角度 如何计算原始点 灰色轮廓 和角度 我试图在 javascript css3 transfo
  • 如何为多个元素添加Class?

    我正在使用这段 javascript 向多个元素添加一个类 我试图引用多个 div 并向它们添加类 它只适用于第一个 JavaScript
  • :目标选择器不适用于选项标签

    我试图在这里帮助一位 StackOverflow 成员 我发现 CSS target选择器不适用于选项标签 我创建了一个示例来说明使用w3schools 教程 http www w3schools com cssref tryit asp
  • data:image/png;base64 是什么意思?

    我从一个在线网站上举了一个例子 CSS 包含一个指向 png 的 URL 和一些随机字母 在这两种情况下 任何人都可以告诉我如何制作这样的代码 或者更确切地说 这些代码是关于什么的 这是html
  • 正常显示截断的文本,但悬停时显示完整文本

    我有一个 div 里面有一段左右的文本 我希望它正常显示前几个单词 但在悬停时展开以显示全文 理想情况下 我想仅使用 CSS 来完成此操作 而不需要重复数据 这是我尝试过的 div 1 ONE div
  • 如何在asp.net背后的代码中获取css样式

    我需要从 asp net c 中的代码后面获取 css 样式 在网上没有找到解决方案 是否可以直接从 styles css 文件获取它 还是需要解决方法 我在我的网络应用程序中使用主题 但我还需要进行一些服务器处理 并且我需要 ccs 文件
  • CSS 网格/布局框架,专注于固定元素和单页全屏布局

    经验法则 如果您在布局中过多地使用 CSS 请切换到框架 我已经研究了数十个网格 布局框架 其中大多数都专注于传统的文档网格布局 我的页面更像是一个 SPA 单页应用程序 它类似于桌面应用程序使用的布局 显然 HTML 不能很好地处理这个问
  • Div 独特的 CSS 样式链接

    我想为单个特定 div 中的链接创建独特的样式 例如 我希望主体中的所有链接为粗体和红色 但在侧边栏 div 中我希望它们为蓝色和斜体 我该怎么办 I have a link color 666666 a visited color 003
  • 如果 CSS 是渲染阻塞的,为什么我们会看到 FOUC?

    为了构建渲染树 浏览器需要 DOM 和 CSSOM CSSOM 只有在下载 CSS 后才能构建 本质上 一旦下载了 CSS 页面就应该可以正常渲染了 但是 为什么我们会在页面上看到 Flash Of Unstyled Content FOU
  • 如何按时间间隔翻转div

    您好 请看这个脚本并告诉我如何按时间间隔翻转 A B 和 C div 我希望A先翻转然后停止 B接下来翻转并停止 然后C然后再次回到A B和C 就像循环一样 然后重新开始 这在 CSS3 中可能吗 在此代码中 所有 div 同时翻转 HOL
  • CSS 选择器嵌套

    是否可以在选择器中嵌套选择器 我有很多类似这样的样式 header h1 header img header form 我想压缩它们 使它们看起来像这样 header h1 img form 以提高可读性 这在普通的旧 CSS 中可能吗 不
  • 在“onClick”上切换 DIV 高度

    我想切换分区的高度 我尝试过将 animate 与 if else 语句一起使用 但它只会反弹 我现在使用的代码将隐藏我的分区而不是切换高度 点击时会触发 document ready function content1 toggle fu
  • 深层嵌套 Flexbox 布局是否会导致性能问题?

    我一直在开发一个 ReactJS 项目 其中我使用 Flexbox 布局创建了大部分组件 由于使用 React 我们可以拥有深度嵌套的组件 因此我的布局具有嵌套的 Flexbox 布局 现在我的问题是 这对性能有任何问题吗 在一个页面上 有

随机推荐

  • 计算机中的换行符、回车符、\n、\r、\n\r 怎么区分

    n是换行 英文是New line r是回车 英文是Carriage return r 是回车 前者使光标到行首 carriage return n 是换行 后者使光标下移一行 line feed r 是回车 return n 是换行 new
  • 将COLMAP中生成的images.txt结果可视化

    instant ngp中执行scripts colmap2nerf py时 在colmap text目录下会生成images txt文件 此文件中每两行定义一幅图像的信息 IMAGE ID QW QX QY QZ TX TY TZ CAME
  • HTTP协议和HTTPS协议的区别

    HTTP协议和HTTPS协议的区别 1 HTTP协议传输的数据都是未加密的 也就是明文的 使用HTTP协议传输隐私信息不安全 2 HTTPS协议是由SSL 安全套接层 为网络通信提供安全及数据完整性的一种安全协议 和HTTP协议构建的 是一
  • Nacos启动异常

    可能原因一 集群切换单机 startup m standalone 可能原因二 derby data文件夹内文件解析失败 解决方案 删了derby data文件夹重启就行 报错信息 供网友搜索 2021 08 11 13 11 37 550
  • Fish Redux系列学习之认识view、action

    继续上一篇文章 Fish Redux系列学习之新建page以及认识state 如上图 现在我们学习的是buildview这个组件 说白了 buildView是我们写页面的地方 跟写普通flutter的page页面一样 我们将页面都写在这里面
  • Date互转String和时间戳

    Date转字符串 private static String convertDateToStr Date date String pattrn if date null return StringUtils EMPTY Instant in
  • 数据类型 -- uint32_t 类型

    整型的每一种都有无符号 unsigned 和有符号 signed 两种类型 float和double总是带符号的 在默认情况下声明的整型变量都是有符号的类型 char有点特别 如果需声明无符号类型的话就需要在类型前加上unsigned 无符
  • QT5 动态链接库的创建和使用(QT自己做动态库给自己使用)

    记录一下QT5 动态链接库的创建和使用 在文章的最后有完成的代码供下载 1 创建动态链接库 先新建一个库项目 选择chose进入下一下页面 类型选择共享库 输入一个名称 我输入的是sld 再点击下一步到 如果这里我们需要QtGui所以也勾选
  • osgEarth的Rex引擎原理分析(一一五)tif文件分辨率的计算

    目标 一一四 中的问题202 maxX为右经度 minX为左经度 maxY为上纬度 minY为下纬度 double resolutionX maxX minX double warpedDS gt GetRasterXSize double
  • cuBLAS的使用

    cuBLAS包含了三部分 cuBLAS API 从cuda6 0开始 CUBLASXT API 从cuda6 0开始 cuBLASLt API 从cuda10 1开始 想要使用cuBLAS API 必须按照以下步骤 在GPU端建立矩阵或向量
  • 资源有限的大型语言模型的全参数微调

    文章目录 摘要 1 简介 2 相关工作 3 方法 3 1 重新思考optimizer的功能 3 1 1 使用SGD 3 1 2 隐式BatchSize 3 2 LOMO 低内存优化 3 3 使用LOMO稳定训练 3 3 1 梯度归一化和裁剪
  • android layout 界面开发,Android开发之CoordinatorLayout使用详解一

    官网描述为 CoordinatorLayout是一个增强版的FrameLayout 继承自ViewGroup 用途 1 作为应用的顶层视图 2 作为一个可以指定子View之间相互作用的容器 通过给CoordinatorLayout的子Vie
  • 协程框架的堆栈大小陷阱

    昨晚和同事联调我们的开放平台 由于基于协程框架的网关服务器总是在接受两个消息后发生段错误 Core Dump掉 让我们百思不得其解 查看Dump文件 没有任何有效的调试信息 gdb设置断点调试 程序总是在接受到第二条消息之前 没到断点就崩溃
  • Qt连接Oracle数据库详细介绍(QOCI)

    Qt连接Oracle数据库详细介绍 1 前提条件 1 本地安装了Oracle数据库或者oracle instant client 2 已编译成功所需要的lib文件QOCI lib 这部分等我稍后补上 2 实现代码 1 包含lib文件 QtS
  • vue电商项目(三)——开发search页面

    目录 一 页面分析 二 获取数据到组件 1 获取数据 2 通过仓库getter简化数据 3 根据参数返回数据 1 将请求封装成一个方法 2 准备一个响应式数据 4 在发送请求之前准备好数据 三 渲染组件内容 1 完成子组件searchSel
  • 做一个FSK的收发试验 之一

    这里使用我们之前写好的简易的DDS模块 我们先回顾一下用到的这个my dds模块 my dds my dds clk rst clr cnt step sin cos module my dds input clk rst clr inpu
  • element 树型结构表格的合并问题

    完成以上的树型结果的表格 需要掌握以下几点 首先 我们先看比较简单 总价单元格的合并的问题 这里总价是合并了两列 他实际上其实就是用到element 中的show summary 同时定义了table中的refs 实际上就是获取到了表格的元
  • apifox图片验证码显示

    添加后置脚本 脚本内容如下 var resp response pm response json let img resp response data let template img src img pm visualizer set t
  • vue中如果解决列表删除最后一页暂无数据bug

    bug 当删除数据的时候 页码变了但是数据没有变化 页面显示暂无数据 是因为你删除了当前的数据之后瞬间发了一个请求 异步请求请求刷新列表 列表刷新的时候需要传一个当前页 这里的当前页没有改变还是之前的当前页导致数据没有变 解决 就是当前页减
  • 【css】css自定义div的滚动条宽度

    需要通过对应浏览器的伪元素来修改 点击这里查看 主流浏览器对应伪元素简介链接地址 示例代码 针对google类webkit内核浏览器 div class scrollDiv div scrollDiv max height 300px ov