多个自定义滚动条

2023-12-01

我想知道的是是否可以在同一页面上有多个定制的 -webkit-scrollbars..我制作了一些特定的 div 颜色,例如一个 div 有绿色文本和图像,另一个有蓝色等。所以我想为每个 div 制作一个自定义滚动条,使其与颜色匹配。

Q1:可以吗?

Q2:如果是这样,我该怎么做?

我想过一种解决办法,但我觉得有点麻烦。一种解决方案可能是让每个 div 包含一个 iframe,然后使用独特的滚动条创建单独的页面,但我不知道这是否会起作用。


当然,您可以 - 只需在滚动条伪类前面加上您想要的选择器,即:

::-webkit-scrollbar-track {
    background-color: #333;
}

/* Override styles for <div>s, for example */
div::-webkit-scrollbar-track {
    background-color: #b13131;
}

我在这里为您做了一个简单的例子 -http://jsfiddle.net/teddyrised/Nsz93/

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

多个自定义滚动条 的相关文章

  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载!仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr
  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source
  • 如何使用 a-href 标签链接回文件夹? [复制]

    这个问题在这里已经有答案了 好吧 我在文件夹中有一个页面 该页面称为 jobs html 该文件夹简称为 jobs 它是我的 网站 文件夹的子文件夹 在 main 文件夹的主目录中是我的 home html 文件 当我尝试做的时候 a hr
  • 如何为背景图像添加边距?

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d
  • 绝对定位的 div 中的文本重叠

    在下面的代码片段中 div 元素 main gt div 相对定位并向左浮动 由于相对定位 div 元素 main gt div 彼此相邻放置 span 元素位于 div 元素下方 main gt div gt span span 元素绝对
  • 菜单作为水平无序列表或表格?

    我有一个无序列表 水平显示为页面的顶部菜单栏 我已经让它显示得相对较好 尽管我一直在调整 IE6 和 IE7 的间距 因为它无法正常显示 令人震惊 无论哪种情况 使用表格来显示菜单还是使用一些CSS hack 我找不到解决方法 会更好吗 显
  • 如何更改chart.js中的标签颜色?

    我有一个像这样定义的饼图 var myChart new Chart ctx type doughnut data labels data labels datasets data data values backgroundColor r
  • 如何使 WordPress 主题全宽?

    我尽了最大努力 但无法通过编辑 CSS 使以下主题全宽 屏幕 如果您能向我展示或给我有关此定制的提示 我将不胜感激 http demo mythemeshop com sociallyviral http demo mythemeshop
  • 如何在CSS3媒体查询中使主体宽度自动等于设备宽度?

    我现在正在做一个移动网站 并尝试使用 CSS3 媒体查询来定位不同的设备 我的部分代码如下 media screen and max width 320px body width 320px some other style 正如您所看到的
  • 更改离子搜索栏的占位符和清晰图标颜色不是全局的吗?

    我有两个离子搜索栏 我只需要更改其中之一的占位符和清除图标颜色
  • 如何在 Bootstrap 3 中指定行高?

    使用 Bootstrap 3 我将 row 类的高度设置为 3 5em 我在行中有几个输入 它们与行的顶部对齐 我想让它们底部对齐 我尝试过垂直对齐 底部的样式 但这似乎不起作用 我想让东西底部对齐的原因是我有一个浮动标签 我在输入字段上方
  • gwt 中的垂直居中

    如何使用垂直面板在 gwt 中垂直居中 或者请告诉我有什么方法可以进行垂直居中 如果你想直接使用VerticalPanel从代码中 您需要使用setVerticalAlignment HasVerticalAlignment ALIGN M
  • span 和 iframe 正文中的宽度(以像素为单位)

    我需要知道 a 的宽度 nbsp 以像素为单位 以及是否取决于字体大小 另外 页面中不同元素的情况是否有所不同 还有 就是 nbsp 与常规不同 目的 nbsp 不间断空格 位于正常空格之上是为了防止单词之间出现换行 您可以使用多个 nbs

随机推荐

  • 将图表和工作表循环为工作表失败。究竟是什么导致了这些错误?

    我尝试将图表和工作表作为变体进行循环 Sub ShowSheets vSheets As Variant Dim i As Long For i LBound vSheets 1 To UBound vSheets 1 Dim wks As
  • 如何使用networkx从文本文件创建图形?

    我有一个像这样的文本文件 node1 node2 weight 1 2 3 1 4 4 3 6 1 3 7 5 我想使用 networkx 创建一个有向图 然后计算每个节点的度数和权重 import networkx as net impo
  • ROR 中 3 路 habtm 的自定义数据库条目

    我正在将现有的 perl gtk 应用程序转换为 ROR 应用程序 我有一个三向 Habtm 关联模型 class CustomerMaster lt ActiveRecord Base has and belongs to many ad
  • 根据另一个数据框中的列删除行[重复]

    这个问题在这里已经有答案了 有没有办法根据另一个数据帧的列从数据帧中删除行 例如 数据框 1 Gene CHROM POS REF ALT N INFORMATIVE Test Beta SE AAA 1 15211 T G 1481 1
  • 需要帮助尝试解析文件并在 scala 中创建地图

    我很难理解如何解析 csv 文件并使用 scala 将其发布到 Web 服务 基本想法是我需要从 csv 文件创建帖子参数 标题是参数 后面的行是值 即 示例 csv firstname lastname age weight height
  • Base64 编码字节数组的有效方法?

    我有一个byte 我正在寻找对其进行 Base64 编码的最有效方法 问题是内置的 Net 方法Convert FromBase64CharArray需要一个char 作为输入 并转换我的byte to a char 只是将其再次转换为 B
  • 什么时候适合在 Android 中使用 Enum?

    我看到了视频 https www youtube com watch v Hzs6OBcvNQE 从谷歌发布了关于枚举价格的信息 我确信枚举成本更高并且存在性能问题 但是 当我需要在枚举中包含多个信息时该怎么办 我是否必须创建 intdef
  • 有没有办法使用 php 解压缩 .Z 文件?

    有没有办法使用 php 解压缩 Z 文件 如今uncompress只不过是一句台词而已gzip有适当的选择 使用gzip 你没有执行 shell 您可以使用Zlib 扩展反而 我会尝试这样的事情
  • c# Visual Studio Project Installer 将文本框中的数据保存到文本文件中

    经过大量研究后 我必须询问你们才能让我的项目最终运行 我想将用户放入 Visual Studio 项目安装程序的文本框中的数据保存到文本文件中 我读过不同的文章 还有这篇文章 C Visual Studio 项目安装程序从文本框检索数据 但
  • Android Studio 与 opencv for android ndk,未找到 opencv 头文件

    我正在使用 Android Studio 进行 Android OpenCV 开发 但是当我编译在 eclipse 中正常的项目时 出现以下错误 D software AndroidStudioProjects CameraMe openC
  • WordPress 上的评论作者链接

    在 WordPress 表单中 当您以访客身份留下评论时 会出现一个网站字段来填写您的网址 如果我们填写该框 我们可以通过调用此函数来获取链接 但是 如果您已登录并且未在您的个人资料中添加该网站 那么当您发表评论时 您的用户名上没有链接 我
  • npm 错误:无法建立隧道套接字,原因=connect ETIMEDOUT

    我有一个使用 Rails 框架并实现 AngularJs 作为前端一部分的应用程序 我已将所有内容推送到 Heroku 并安装了 Heroku Toolbelt 但是当我尝试使用 heroku run rake db migrate 迁移数
  • ASP.NET MVC 和 Ajax,并发请求?

    AJAX 新手来了 目前 在我的 ASP NET MVC Web 应用程序中 我的 AJAX 请求似乎正在批量或排队 我不确定 在前一个请求完成之前 似乎没有任何请求完成 我该如何获得独立返回的请求 我不一定希望有人给我答案 但也许一些可以
  • 任务“:app:checkDebugAarMetadata”执行失败

    我在运行我的应用程序时收到此错误 Execution failed for task app checkDebugAarMetadata gt Could not resolve all files for configuration ap
  • 增量定义?

    无论如何 每次使用它时都有一个定义的增量吗 例如 int a ADEFINE int b ADEFINE a 为 1 b 为 2 您可以使用 COUNTER 尽管这不是标准的 MSVC 和 GCC 都支持它 如果你可以使用boost 预处理
  • p:fileUpload 在哪里保存我的文件?

    我的页面上有一个 p fileUpload 函数 每次上传文件时 我似乎都无法在 web xml 文件中指定的文件夹中找到它 我已将以下 jar 添加到我的库中 primefaces 3 2 jar commons io 2 3 jar c
  • SVG tspan 未与 text-anchor="end" 对齐的问题

    我有一些这样的代码 svg font family Verdana sans serif color 000 key font size 75 overflow visible caphgh font weight bold keynor
  • 这段代码的作用是什么?

    我不太确定这意味着什么或它在做什么 有人可以详细说明吗 Player player Player sender 它获取发送者引用的对象 并尝试将其转换为 Player 类型 Java 对象是强类型的 这意味着您必须声明对象的类型 如果发送者
  • 如何在 TFS 中反序列化和序列化构建过程参数

    我正在尝试使用 TFS 2013 API 创建新的构建定义 我必须引用的流程模板包含几个自定义活动和参数 创建构建定义时 一些属性值需要动态更新 所以我尝试使用以下代码反序列化过程参数 IDictionary
  • 多个自定义滚动条

    我想知道的是是否可以在同一页面上有多个定制的 webkit scrollbars 我制作了一些特定的 div 颜色 例如一个 div 有绿色文本和图像 另一个有蓝色等 所以我想为每个 div 制作一个自定义滚动条 使其与颜色匹配 Q1 可以