登录 注册

[css] 隐藏数据库拖动条

求隐藏数据库拖动条 CSS

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

202409300849.png

  • 思源笔记

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

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

    22327 引用 • 89348 回帖
  • 代码片段

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

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

    69 引用 • 372 回帖 • 1 关注
  • CSS

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

    198 引用 • 550 回帖
  • Q&A

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

    8106 引用 • 36989 回帖 • 161 关注
1 操作
JeffreyChen 在 2024-10-03 16:46:51 更新了该帖
温州 位置
88 悬赏
1 关注
2 收藏
1 操作
10 回帖
4
3
2
179 126 50 2

相关帖子

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

近期热议

推荐标签 标签

  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖 • 1 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • Python

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

    543 引用 • 672 回帖
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    176 引用 • 815 回帖
  • danl
    • 132 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • 外包

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

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

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖 • 3 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    27 引用 • 225 回帖 • 170 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    6 引用 • 14 回帖 • 1 关注
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    77 引用 • 430 回帖 • 2 关注
  • Solo

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

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

    1434 引用 • 10054 回帖 • 490 关注
  • etcd

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

    5 引用 • 26 回帖 • 529 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖 • 1 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 633 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    690 引用 • 535 回帖
  • sts
    2 引用 • 2 回帖 • 196 关注
  • Webswing

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

    1 引用 • 15 回帖 • 629 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的，开放源码的分布式应用程序协调服务，是 Google 的 Chubby 一个开源的实现，是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件，提供的功能包括：配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 4 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 665 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 245 关注

最新标签