使滚动条轨道透明

2023-12-21

这里很少有提出相同问题的问题,但他们的解决方案对我不起作用。

这是其中一个问题的图片以及我想要实现的目标。我有一个列表,当有更多项目时,会显示滚动条。

我还将溢出-y 设置为覆盖,因为我不希望滚动条添加到列表的宽度。如何使轨道透明以便可以看到下面的项目?

跟踪重叠内容 https://i.stack.imgur.com/TIJNS.png

[更新]: 小提琴显示它现在的样子,图片就是我想要得到的。

p {
overflow-y: overlay;
width: 101%; }

https://jsfiddle.net/yk1cverh/2/ https://jsfiddle.net/yk1cverh/2/


您可以在 css 代码中添加以下内容:

body::-webkit-scrollbar {
  width: 0.7em;
  background: white;
}
body::-webkit-scrollbar-thumb {
  background: #c0392b;
  height:30px;
}

body::-webkit-scrollbar-track-piece
{
   display:none;
}

在这一部分中:

body::-webkit-scrollbar {
  width: 0.7em;
  background: white;
}

您可以更改background: white;任何你想要的颜色。您可能需要使其与身体的背景颜色相似或将其设置为透明。

这是一个演示它的 JS Fiddle。

https://jsfiddle.net/qzsbf0tm/687/ https://jsfiddle.net/qzsbf0tm/687/

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

使滚动条轨道透明 的相关文章

  • 如何增加四开内容列的宽度

    我有一个四开 html 页面 带有侧边栏和目录 即 3 列页面 我想增加内容列 中心列 的默认宽度 现在固定为 950px 我怎么做 四开 yml project type website website title Big Center
  • Angular 2 RC 5 Internet Explorer 10 滚动性能不佳

    我已经使用 Angular 2 构建了一个产品目录应用程序 现在我正在调试 IE 的缺陷 所以 这就是发生的事情 我有一个CatalogComponent它包含一些按类别显示产品的子组件 我的页面中有 50 60 个缩略图 因此页面负载并不
  • CSS IE8 无法设置列表元素的样式

    我想制作一个有序列表 居中且没有项目符号 最大的差距是我无法将其风格化到 explorer 8 中 它不能水平对齐 而在所有其他浏览器中却可以 我在网上查了很多资料 但找不到解决方案 我最后一次尝试是复制我在 堆栈溢出 中找到的代码 不浮动
  • 如何仅在悬停菜单项或 div 时显示 div?

    我的项目包含在无序列表中 我在此列表之外隐藏了 div 使用 display none 当您将鼠标悬停在列表项上时 我希望显示 div 如果您将鼠标从列表项移动到其下方的 div 它也必须保持可见 我愿意通过 CSS JavaScript
  • CSS3 PIE - 给 IE border-radius 支持不起作用?

    我正在尝试在 IE 中使用圆角CSS3 PIE http css3pie com 附着行为 这是我的CSS fieldRow clear both padding 0 margin 0 overflow hidden line height
  • Internet Explorer 10+ 媒体查询和响应断点

    我正在尝试将 IE10 特定媒体查询与最大宽度页面断点结合起来 我很确定它们可以组合 但不知道如何去做 这是原始的 IE10 唯一的 css 媒体查询 media all and ms high contrast none ms high
  • 在 html5 音频播放器时间轴上制作样式

    我想在 html5 音频播放器上制作一个样式
  • 使用小屏幕时强制在按钮文本内换行

    我有一个响应式网络应用程序 其中包含一些对于小移动屏幕来说太大的按钮 它们包含太多文字 因此最终会从屏幕上消失 我目前正在使用a通过给它们引导类来标记为按钮 所以目前的代码是这样的 a Here I have a button with l
  • 离子标签栏与主页按钮重叠(iPhone X - iOS 11)

    使用 iOS 11 和 iPhone X苹果指定 https developer apple com ios human interface guidelines overview iphone x 每个应用程序都应该位于 安全区域 由于虚
  • CSS mix-blend-mode 可以与转换一起使用吗?

    显然 mix blend mode 不能很好地配合transform translate and z index 将其中任何一个应用到某些文本元素将立即取消混合混合模式效果 问题 这是一个已知的限制吗 有没有基于 CSS 的解决方法 我知道
  • 柔性端和端部的区别? [复制]

    这个问题在这里已经有答案了 当我使用 css 属性时align items 我看不出与值有任何视觉差异flex end或值end 有什么区别align items end and align items flex end 一个值 end 在
  • CSS3 Flexbox:显示:box vs. flexbox vs. flex

    昨天我在学校找到了一个使用 CSS 3 Flexbox 声明的网站 我以前从未用过那个 所以我用谷歌搜索了一下 发现了很多不同风格的 Flexbox 语句 有些人写display box 一些使用display flexbox 和别的dis
  • 在CSS计算函数中使用模数

    有没有办法在CSS calc函数中使用或实现模数运算符 我知道有 mod 运算符并且 IE 支持它 但是其他浏览器呢 例如 element id width calc 100 mod 5 不幸的是 没有更多提及mod运算符在最近的规格 ht
  • 有没有办法为 CSS3 边框图像的每一侧使用不同的图像?

    在 Firefox 和 Safari 上 我可以通过以下 CSS 使用图像作为边框 moz border image url shadow left png 0 7 0 7 round round webkit border image u
  • CSS动画比JS动画快吗?

    前段时间读到一篇文章说CSS动画比JS动画快 使用 jQuery 做了一些动画后 我可以理解为什么有些人会这么说 因为 jQuery 动画有时会出现错误并且速度很慢 但我想知道的是 这个论点是否有任何核心事实 有一种常见的误解 认为 CSS
  • 使用 twitter-bootstrap 时使文本区域缩放到网页

    我正在尝试根据页面大小调整文本区域的比例 即我试图使文本区域填充第二个容器和页脚之间的空间 HTML
  • 第二个内联块 div 上方的空白

    我确信我在这里忽略了一些东西 但无法解决 我的第二个内联块 div 上方有空白 只有当右侧 div 中的 文本此处 长度小于左侧 div 时 才会发生这种情况 js小提琴 http jsfiddle net B2S4r 2 http jsf
  • 样式表何时添加到 document.styleSheets

    我正在尝试使用 javascript 动态添加 css 样式表规则 例如示例 2here https developer mozilla org en DOM CSSStyleSheet insertRule 它在大多数情况下都有效 但似乎
  • IE8 中的 CSS 属性选择器错误?

    指定为CSS 2 1 http www w3 org TR CSS2 selector html attribute selectors input type submit or input type submit 必须匹配 type 属性
  • 缩放父元素但删除子元素的缩放

    我目前正在使用一些CSS动画scale 有没有办法限制子元素不缩放而只有父元素会缩放 scale max width 200px height 200px background color beige webkit transition t

随机推荐

  • 一旦我的应用程序进程被终止,什么会保持我的活动状态?

    我一直在通过运行一个消耗内存的应用程序来测试我的程序的行为 该应用程序会强制杀死我的应用程序 阅读完以下问题的答案后onSaveInstanceState的bundle保存在哪里 https stackoverflow com questi
  • 启用 MSAA 时,iPhone 中的 openGL 纹理渲染失败

    我的 iPhone 纹理渲染代码仅在禁用 MSAA 时才有效 否则我得到的只是黑色纹理 问题的原因可能是什么 这是我的代码 glViewport 0 0 target gt Width target gt Height glClear GL
  • 在 vba msgbox 中不使用 goto 循环的方法

    我正在尝试找到一种方法来避免在 VBA 中使用 GoTo 循环 因为我知道它们可能会导致严重的混乱和问题 我有一个用户InputBox 其中用户定义变量 目前if语句上有3个选项 if Y ElseIf N和else GoTo Start
  • Postgresql 函数中的“$$”是什么意思?

    CREATE OR REPLACE FUNCTION increment i integer RETURNS integer AS BEGIN RETURN i 1 END LANGUAGE plpgsql 上面的代码取自Postgresq
  • 获取使用泛型的函数的返回类型

    免责声明 以下是过于简化的功能 我知道它们是 无用 function thinger
  • 如何在 Team Foundation Server 中解锁其他人的文件

    我们有一个项目存储在我们的 TFS 服务器中 并且我从另一台计算机和另一个用户 两者都不再使用 签出了一些文件 有没有办法强制解锁文件 没有对其进行任何更改 因此如果我只能这样做 那么这样做是安全的 这是我在 Visual Studio 2
  • 无法编译的源代码 - 错误的符号类型:

    第 14 行发生错误 线程 main 中的异常 java lang RuntimeException 无法编译 源代码 错误的符号类型 很难找到解决方案 package example public class Num public sta
  • 从realm.io读取并添加到listview

    我想用Realm io保存数据 然后在列表视图中显示每个项目 这是我创建数据库的方式 我认为 config new RealmConfiguration Builder this name timeLog schemaVersion 42
  • MacOS 上的 DotNet core 2.0 在使用 couchbase dotnet sdk 时出现由 httpclient 触发的 libcurl 和 ssl 错误

    我正在开发一个Dotnet core 2 x 实际上使用2 1 4 我写这篇文章时的最新版本 Web api项目 为了使用couchbase作为我的数据库服务器 我需要使用couchbase SDK sdk 声明它支持 DotNet cor
  • 连接主报表和子报表 - 将对象列表传递到子报表

    我正在使用报表4 5 1我在连接主报告和子报告时遇到了问题 我有两个对象 Account accountID date listOfParagraphs 所有字段均在主报告中定义 段落 account paragraphNo someObj
  • 使用 XDebug + PHPStorm 进行调试迫使我始终要进入

    我正在尝试调试我的密码接收 tests 我的调试平台使用PHPStorm X调试从正确的浏览器使用时效果很好IDE KEY作为饼干 但是 当尝试使用以下命令调试 codecept 时CLI我遇到以下问题 如果我在 Cest 类中放置断点 行
  • 为什么我无法在 Apache 中禁用 .htaccess?

    这与我读过的大多数问题相反 我在使用 Apache 2 2 8 的 Amazon 实例上运行 Ubuntu 8 04 我不明白为什么将 root 的 AllowOverride 设置为 None 不会阻止包含我的 htaccess 文件 我
  • 为什么Object类是java中的超类[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 为什么object Class是java中的超类昨天我参加了一次面试 面试官问了我一些问题 因为 java lang 包中的 Object 类位
  • R 中 Arules 序列挖掘的主序列

    如何从 R 中 arulesSequence 包中的 cspade 算法中删除子序列 例如 如果我的数据 Sample txt 如下 列名称 sequenceID EventID 大小 项目 1 1 1 A 1 2 1 B 1 3 1 C
  • 用C编写命令行shell;第一次尝试使用 ncurses/C

    我正在开发一个类项目 在该项目中我必须编写一个具有以下要求的命令行 shell shell 必须能够读取缓冲的输入 缓冲区应为 64 个字符 Error conditions should be handled 超出缓冲区大小 中断 当信号
  • 需要检测多条线的 RANSAC

    这是一个有点理论问题 但我想知道当图像中检测到多条线时如何随机选择点 到目前为止 在我见过的大多数示例中 似乎只检测到一行 而且看起来很容易 但是 我不确定它如何扩展以检测具有更多点的多条线 我认为你是在一个基本的误解下运作的 RANSAC
  • 如何覆盖 TortoiseSVN 中的本地更改?

    假设我进行了检查 编辑了一些内容 并意识到我想重新下载存储库代码并覆盖我的本地更改而不提交它们 我下载了一个项目 进行了一些编辑 然后我意识到我不喜欢我的本地更改 我尚未提交 如何在不删除文件夹的情况下恢复到存储库的当前状态 我该怎么做呢
  • 为购物车应用程序设计数据库? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我从未从头开始设计数据库 数据模型 模式 尤其是对于 Web 应用程序 在最近的一些工作面试中 我被要求为购物车应用程序 设计 一个数
  • 从没有空格/组合词的文本中检测最有可能的单词

    如何从组合字符串中检测和拆分单词 Example cdimage gt cd image filesaveas gt file save as 这是一个动态编程解决方案 作为记忆函数实现 给定一个单词字典及其出现频率 它会将输入文本分割到给
  • 使滚动条轨道透明

    这里很少有提出相同问题的问题 但他们的解决方案对我不起作用 这是其中一个问题的图片以及我想要实现的目标 我有一个列表 当有更多项目时 会显示滚动条 我还将溢出 y 设置为覆盖 因为我不希望滚动条添加到列表的宽度 如何使轨道透明以便可以看到下