求隐藏数据库拖动条 CSS
只需要鼠标悬浮在拖动条处才显示
求隐藏数据库拖动条 CSS
只需要鼠标悬浮在拖动条处才显示
思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。
融合块、大纲和双向链接,重构你的思维。
代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。
用户在该标签下分享代码片段时需在帖子标题前添加 [css]
或 [js]
用于区分代码片段类型。
CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。
用这个 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等)隐藏滚动条 */
}
只需要鼠标悬浮在拖动条处才显示
只能实现鼠标悬浮在数据库上的时候才显示
隐藏不了嘛 🥺(一个页里连着放了好几个数据库,看着一排排横线有点难受)
小技巧 get√,感谢分享!
用这个 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等)隐藏滚动条 */
}
只需要鼠标悬浮在拖动条处才显示
只能实现鼠标悬浮在数据库上的时候才显示
@JeffreyChen 这个代码是等价效果,只不过和你的代码一样,鼠标移入滚动条会闪动,一直没找到解决办法。
.av__scroll::-webkit-scrollbar {
display:none;
}
.av__scroll:hover::-webkit-scrollbar {
display:block;
}
需求满足了~
不过发现拖动条显示的时候下方的块会有小段位移(应该是思源本身的问题),鼠标来回经过会有点晃眼,比较下还是直接隐藏了好 😂
已采纳,感谢 J 佬和 W 佬!
拖动条显示的时候下方的块会有小段位移
我想到了另一种方案来解决这个问题,这个代码片段应该行了:
/* 数据库隐藏横向滚动条 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
👍
我这边测试下用#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); /* 滚动条轨道的颜色 */
}
Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用 。
有空闲时间是接外包好呢还是学习好呢?
webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。
有什么新发现就分享给大家吧!
Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。
这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!
Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。
React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。
Open Source, Open Mind, Open Sight, Open Future!
FlowUs.息流 个人及团队的新一代生产力工具。
让复杂的信息管理更轻松、自由、充满创意。
Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。
Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。
资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。
愿逝者安息!
脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。
一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。
Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。
心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。
LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。
你若安好,便是晴天。
Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。
以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。
Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。
Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。
Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。
RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。