悬浮的内容直接显示在侧边栏

本贴最后更新于 1465 天前,其中的信息可能已经时异事殊

我有个想法,就是将悬浮的内容直接显示在侧边栏(也许可以创建一个悬浮栏,重要的是固定在那),而不是直接弹出来。我觉得现在这样的悬浮显示不是很方便。

1)弹出位置不固定,虽然位置临近触发点,但是看着排版乱,几乎每次都要调整位置-小强迫症)

2)遮挡。其实悬浮弹出的内容一般会挡住你原来的内容的,这意味着你的注意力必须转移到弹出的内容上,你被打断了原来的节奏,如果你需要穿插查看弹出内容和原内容,你必须反复地「悬浮」和「离开」,如果可以将悬浮内容移至侧边栏(或悬浮栏?),就可以「悬浮一次,反复查看」,而且不会打断正在进行的阅读,就可以在当前小段阅读结束后连贯地转过去看「拓展/解释」。需要穿插查看时应该「转移视线」而不是「重新悬浮 + 转移视线」。

3)有个「钉住」的功能似乎可以解决「反复悬浮」的情况,但是会出现更多的问题。无法调整相对层级,难以管理多个页面,需要不断调整位置等等。

image.png

4)我个人更倾向将「悬浮内容」放在一个「固定的容器里-悬浮栏?」,专门放置悬浮的内容,跟编辑栏一样,可以多页面,悬浮页面提供一个固定的按钮将页面固定在容器里,新的悬浮会直接取代当前悬浮页面(如果当前悬浮页没有被固定的话),同一悬浮只能同时存在一个,这样就不会出现反复新增的情况。

image.png

5)当然这可以做成「开关选项」,需要的自行开启。这样就不会强行改掉原来用户的习惯。

  • 思源笔记

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

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

    27463 引用 • 114988 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 你好,如果需要新开窗口查看引用的话可以试下按住 Shift 点击引用。也就是说,如果需要“常驻”查看引用的窗口,那么可以用 Shift 来打开,如果只是需要临时查看,就用悬浮预览。

    上面两个用法基本已经覆盖大部分习惯场景了,所以单独用来打开引用的面板估计不会考虑,感谢反馈。

    1 回复
  • Yanser
    作者

    用了一下 Shift+ 点击,发现几个问题(仅对于我想要的效果来说)

    1)这样点击会不断新增侧边栏,需要手动合并或者关闭。

    2)我的目的是点击,而点击之前可能会被误认为「悬浮」,弹出悬浮预览。能否提供一个开关(或快捷键?)用于阻止「悬浮」预览事件的发生?或者提供给用户「调节悬浮预览灵敏度」的功能?

    3)我想要侧边栏显示的的是「无上下文」(聚焦)的内容(主要是块引用),而 Shift+ 点击会直接显示全文(对获取目标信息造成干扰)能否提供设置用于改变点击显示的默认内容(是否包含上下文/是否聚焦)?

    1 回复
  • 我们再考虑一段时间看看,也许这段时间内还有其他用户有这方面的反馈建议。就目前的开发计划来看,短期内应该是不会直接支持的,感谢理解。

推荐标签 标签

  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 191 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖 • 1 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    25 引用 • 373 回帖 • 1 关注
  • jsDelivr

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

    5 引用 • 31 回帖 • 114 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 3 关注
  • WebComponents

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

    1 引用 • 20 关注
  • 以太坊

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

    34 引用 • 367 回帖 • 1 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 67 回帖 • 442 关注
  • 书籍

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

    84 引用 • 414 回帖
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 512 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    173 引用 • 543 回帖
  • Follow
    4 引用 • 12 回帖 • 13 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 538 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    45 引用 • 44 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 13 关注
  • React

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

    192 引用 • 291 回帖 • 360 关注
  • 博客

    记录并分享人生的经历。

    274 引用 • 2389 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 14 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖
  • JSON

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

    53 引用 • 190 回帖 • 1 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    168 引用 • 598 回帖
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    305 引用 • 772 回帖
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 176 关注
  • 心情

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

    59 引用 • 369 回帖 • 1 关注
  • jQuery

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

    63 引用 • 134 回帖 • 735 关注