登录 注册

[css] 隐藏数据库拖动条

求隐藏数据库拖动条 CSS

只需要鼠标悬浮在拖动条处才显示

202409300849.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    23000 引用 • 92498 回帖 • 2 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    90 引用 • 556 回帖
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    196 引用 • 540 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8442 引用 • 38438 回帖 • 154 关注
1 操作
JeffreyChen 在 2024-10-03 16:46:51 更新了该帖
88 悬赏
1 关注
2 收藏
1 操作
10 回帖
4
3
2
281 143 125 2 10

相关帖子

被采纳的回答
  • JeffreyChen • • 2
    付费者 支持者 捐赠者

    用这个 CSS 代码片段：

    /* 数据库隐藏横向滚动条 CSS片段 */
/* by JeffreyChen https://ld246.com/article/1727657583809/comment/1727669869343?r=JeffreyChen#comments */
.av:not(:hover) > .av__container > .av__scroll {
    scrollbar-width: none; /* 对于 Firefox 隐藏滚动条 */
}
.av:not(:hover) > .av__container > .av__scroll::-webkit-scrollbar {
    display: none; /* 对于 Webkit 浏览器（Chrome, Safari等）隐藏滚动条 */
}

    只需要鼠标悬浮在拖动条处才显示

    只能实现鼠标悬浮在数据库上的时候才显示

10 回帖
[css] 隐藏数据库拖动条

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • EmberSky •
    付费者

    看着好像是隐藏不了的
    推荐个小技巧: 按住 shift 再滚动滚轮 就是左右滚动

    1 回复
  • JOYCELEEEEE • • 1 评论
    订阅者 作者

    隐藏不了嘛 🥺（一个页里连着放了好几个数据库，看着一排排横线有点难受）

    小技巧 get√，感谢分享！

    应该隐藏不了, 页面上没有找到这个元素, 不过我不是专业的, 可以再等等大佬
    EmberSky • • 1
  • JeffreyChen • • 2
    付费者 支持者 捐赠者

    用这个 CSS 代码片段：

    /* 数据库隐藏横向滚动条 CSS片段 */
/* by JeffreyChen https://ld246.com/article/1727657583809/comment/1727669869343?r=JeffreyChen#comments */
.av:not(:hover) > .av__container > .av__scroll {
    scrollbar-width: none; /* 对于 Firefox 隐藏滚动条 */
}
.av:not(:hover) > .av__container > .av__scroll::-webkit-scrollbar {
    display: none; /* 对于 Webkit 浏览器（Chrome, Safari等）隐藏滚动条 */
}

    只需要鼠标悬浮在拖动条处才显示

    只能实现鼠标悬浮在数据库上的时候才显示

    2 回复
    3 操作
    JeffreyChen 在 2024-09-30 13:06:23 更新了该回帖
    JeffreyChen 在 2024-09-30 12:32:36 更新了该回帖
    JeffreyChen 在 2024-09-30 12:32:02 更新了该回帖
  • JOYCELEEEEE •
    订阅者 作者

    全隐藏也行。

    因为我注意到最底下“计算”栏就是悬浮才出现，所以感觉还是有戏的 🤔 如果没人再回复我就采纳~

    202409301252.png

    1 回复
  • JeffreyChen • • 1
    付费者 支持者 捐赠者

    我又更新了一下之前的代码片段，你看看效果合不合适

    1 回复
  • wilsons • • 2 • 1 评论
    付费者 捐赠者

    @JeffreyChen 这个代码是等价效果，只不过和你的代码一样，鼠标移入滚动条会闪动，一直没找到解决办法。

    .av__scroll::-webkit-scrollbar {
    display:none;
}
.av__scroll:hover::-webkit-scrollbar {
    display:block;
}
    不完全等价，我的是鼠标移入代码块就显示
    JeffreyChen • • 1 赞同
  • JOYCELEEEEE • • 1 赞同 • 1 评论
    订阅者 作者

    需求满足了~

    不过发现拖动条显示的时候下方的块会有小段位移（应该是思源本身的问题），鼠标来回经过会有点晃眼，比较下还是直接隐藏了好 😂

    已采纳，感谢 J 佬和 W 佬！

    1 回复
    好好好，再次膜拜两位大佬_(:з ゝ ∠)_
    JOYCELEEEEE •
  • JeffreyChen •
    付费者 支持者 捐赠者

    拖动条显示的时候下方的块会有小段位移

    我想到了另一种方案来解决这个问题，这个代码片段应该行了：

    /* 数据库隐藏横向滚动条 CSS片段 */
/* by JeffreyChen https://ld246.com/article/1727657583809/comment/1727771556550?r=JeffreyChen#comments */
.av:not(:hover) > .av__container > .av__scroll {
    --b3-scroll-color: #ffffff00;
}

    通过将滚动条的颜色改为透明来实现“隐藏”，就不会破坏布局了。@wilsons

    1 回复
  • wilsons •
    付费者 捐赠者

    👍

    我这边测试下用#ffffff00, rgba, 等并不能使颜色透明，所以我改成了和文档背景色一样的颜色，并把轨道颜色也改成了文档同样的颜色。这样看起来就完美实现了隐藏效果。

    .av:not(:hover) > .av__container > .av__scroll {
    --b3-scroll-color: var(--b3-theme-background);
}

.av:not(:hover) > .av__container > .av__scroll::-webkit-scrollbar-track {
    background-color: var(--b3-theme-background); /* 滚动条轨道的颜色 */
}

    r67.gif

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    我这边测试下用#ffffff00, rgba, 等并不能使颜色透明

    神奇 😳

请输入回帖内容 ...
JOYCELEEEEE
输入是为输出。
回帖
146
 帖子
45
 积分
1941

近期热议

推荐标签 标签

  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖 • 1 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    55 引用 • 85 回帖
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 537 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 5 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 667 关注
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 401 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 528 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 419 关注
  • danl
    • 146 关注
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    409 引用 • 1246 回帖 • 587 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 106 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 319 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3578 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 559 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    196 引用 • 540 回帖 • 1 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 387 关注
  • 面试

    面试造航母，上班拧螺丝。多面试，少加班。

    325 引用 • 1395 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 5 关注
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    78 引用 • 391 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 73 关注
  • 导航

    各种网址链接、内容导航。

    42 引用 • 175 回帖 • 1 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司，该公司位于捷克的布拉格，并在俄国的圣彼得堡及美国麻州波士顿都设有办公室，该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境：IntelliJ IDEA。

    18 引用 • 54 回帖
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注
  • OnlyOffice
    4 引用 • 3 关注

最新标签