登录 注册

[css] 隐藏数据库拖动条

本贴最后更新于 317 天前，其中的信息可能已经东海扬尘

求隐藏数据库拖动条 CSS

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

202409300849.png

  • 思源笔记

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

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

    26736 引用 • 111381 回帖 • 2 关注
  • 代码片段

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

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

    225 引用 • 1615 回帖
  • CSS

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

    199 引用 • 543 回帖 • 5 关注
  • Q&A

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

    10323 引用 • 46868 回帖 • 61 关注
1 操作
JeffreyChen 在 2024-10-03 16:46:51 更新了该帖
88 悬赏
1 关注
2 收藏
1 操作
10 回帖
4
3
2
804 182 8 363 4 246

相关帖子

被采纳的回答
  • 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] 隐藏数据库拖动条

欢迎来到这里！

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

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

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

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

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

    小技巧 get√，感谢分享！

    应该隐藏不了, 页面上没有找到这个元素, 不过我不是专业的, 可以再等等大佬
    HugZephyr • • 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
输入是为输出。
回帖
148
 帖子
46
 积分
4284

近期热议

推荐标签 标签

  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 148 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 68 关注
  • Jenkins

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

    54 引用 • 37 回帖 • 2 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 13 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    77 引用 • 37 回帖 • 1 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖
  • Solo

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

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

    1444 引用 • 10083 回帖 • 500 关注
  • OpenCV
    15 引用 • 36 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 555 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 1 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 808 关注
  • 面试

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

    326 引用 • 1395 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 3 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 64 关注
  • SOHO

    为成为自由职业者在家办公而努力吧！

    7 引用 • 55 回帖
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    36 引用 • 200 回帖 • 42 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 5 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖
  • 链书

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

    链书社

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

    14 引用 • 257 回帖 • 6 关注
  • SSL

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

    70 引用 • 193 回帖 • 414 关注
  • 游戏

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

    188 引用 • 832 回帖
  • Pipe

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

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

    134 引用 • 1128 回帖 • 110 关注
  • 导航

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

    45 引用 • 177 回帖
  • Webswing

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

    1 引用 • 15 回帖 • 651 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”，乌云众测平台认证的“安全云”，为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 567 关注
  • 资讯

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

    56 引用 • 85 回帖 • 3 关注

最新标签