登录 注册

[css] 隐藏数据库拖动条

求隐藏数据库拖动条 CSS

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

202409300849.png

  • 思源笔记

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

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

    21474 引用 • 84895 回帖
  • 代码片段

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

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

    34 引用 • 185 回帖
  • CSS

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

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

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

    7691 引用 • 35037 回帖 • 192 关注
1 操作
JeffreyChen 在 2024-10-03 16:46:51 更新了该帖
温州 位置
88 悬赏
1 关注
2 收藏
1 操作
10 回帖
4
3
2
117 94 22

相关帖子

被采纳的回答
  • 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
输入是为输出。 温州
回帖
117
 帖子
37
 积分
1982

近期热议

推荐标签 标签

  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 622 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 232 回帖 • 2 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 259 关注
  • 分享

    有什么新发现就分享给大家吧！

    246 引用 • 1788 回帖
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    131 引用 • 1114 回帖 • 137 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    931 引用 • 937 回帖
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 413 关注
  • 开源

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

    406 引用 • 3569 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 2 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。

    540 引用 • 672 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    4 引用 • 16 回帖 • 1 关注
  • 资讯

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

    54 引用 • 85 回帖 • 4 关注
  • IPFS

    IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 247 关注
  • RIP

    愿逝者安息！

    8 引用 • 92 回帖 • 340 关注
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    23 引用 • 71 回帖
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 7 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 626 关注
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    10 引用 • 32 回帖 • 99 关注
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    35 引用 • 35 回帖
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 8 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    167 引用 • 1497 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 3 关注
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3453 回帖 • 229 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    116 引用 • 99 回帖 • 231 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 380 关注

最新标签