[js] 滚动时自动定位大纲位置(类似链滴和 csdn 等)

功能介绍

如题。

改自 [js] 希望大纲支持动态定位 但又与它是完全不同的实现方式。

去除了较为个性化的东西,仅仅实现滚动时自动定位大纲部分。

核心代码较简单,但需要考虑很多东西,比如,页面加载,标签切换,大纲同步/异步加载等的影响等。

注意事项

由于使用了类似插件的事件触发方式,因此至少安装一个插件才能使用。

暂不支持手机和预览模式。

使用方法

如何使用代码片段? - 思源笔记社区平台

效果演示

支持作者

如果你喜欢该代码,请给作者点赞或打赏!

image.png

代码片段

👇 打赏后可见(为什么要打赏后可见?主要想通过这种方式统计使用人数及用户需求,以帮助作者分析哪些功能是用户最需要的)

打赏 20 积分后可见
20 积分 • 33 打赏
  • 思源笔记

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

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

    28446 引用 • 119786 回帖
  • 代码片段

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

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

    285 引用 • 1986 回帖
2 操作
wilsons 在 2025-09-13 23:03:19 更新了该帖
wilsons 在 2025-09-13 22:42:29 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Fighter93

    感谢分享 🙏

  • wilsons

    素页无声风自轻,
    篇章次第若云行。
    长川滚卷波声里,
    纲目随人步步生。

  • 有点意思

  • Fighter93

    当关闭大纲不再使用后,监听代码是否还在后台持续运行?

    1 回复
  • wilsons

    你是指这个 whenOutlineExist 吗?

    这个在大纲打开后就停止监控了,如果一开始就打开了,比如刷新时就已打开,压根不会监控。

    image.png

    这个工作主要为了,当大纲一打开,立即根据当前页面的标题,定位大纲中的标题应该显示哪个。如果你不需要这个功能,不监控大纲打开也一样的。

    1 回复
  • Fighter93

    我指的是鼠标在编辑器中滚动的监听,如果关闭大纲,切换为“文档树”,如图:捕获.PNG那,编辑器中的鼠标滚动监听还在持续运行。我编程能力有限,看不懂你的代码,粗暴地搜索了下“removeEventListener”,发现没有相关的销毁鼠标监听的代码。

    1 回复
  • wilsons

    这里并没有停止监控,为什么?

    因为,即使大纲隐藏了,当滚动时,大纲也在默默定位中,当你再次打开大纲时,会立刻显示大纲位置,像未关闭一样。

    如果停止监控,要想实现这种效果,就要监控大纲打开和关闭,然后再次定位,同样需要监控,比较遗憾的是,思源大纲开关不同情况下表现的并不一致(这是思源的通病,很多元素都是同样行为代码层表现不一致),这会导致监控大纲开关要复杂的多,需要多种情况的复杂判断。

    那么,滚动会有性能问题吗?

    不会,因为滚动回调里的逻辑非常简单,几乎微秒级的,再加上做了节流处理,因此性能问题可以忽略不计。

    我粗略算了一下,这个压力相当于你 22 年才工作 1 天,毫无压力。

    如果你担心并且不想要重开自动定位功能,可以让 AI 帮忙改写。


    另外,现在已升级到 0.0.2。

    0.0.2 更新内容如下:

    1. 当大纲从未打开时及早返回,增强性能;
    2. 当大纲被其他 dock 隐藏后再次激活打开时自动定位标题位置
    1 回复
  • Fighter93

    好的,感谢 😊🙏

  • wilsons 1

    @auric @wucunwei @fousden @linyuanmuyu @Helvetica @Sonsy @chenhao396 @hesy @Fighter93 @CongSec @siyuan100861186

    已更新至 0.0.3

    最近更新内容如下:

    0.0.3 改进当大纲标题的祖先被折叠时,自动临时展开祖先元素(临时的含义指如果思源支持持久化大纲后不会影响持久化状态,比如,阿川大佬的 pr https://github.com/siyuan-note/siyuan/pull/15814)

    0.0.2 当大纲从未打开时及早返回,增强性能;当大纲被隐藏后再次打开自动定位标题位置

  • wilsons 1

    @kuaizi @auric @wucunwei @fousden @linyuanmuyu @Helvetica @Sonsy @chenhao396 @hesy @Fighter93 @CongSec @siyuan100861186

    已更新至 0.0.4

    0,0.4 更新内容如下:

    改进计算标题位置算法:根据上下滚动分别计算标题位置,更符合实际情况,与链滴的效果保持一致。

    0.0.4 之前版本缺点:

    仅标题跨过顶部位置时才定位,向上滚动时体验不好。

    @CongSec 你之前的那个动态定位的代码也同步更新到 0.0.6 了。

  • wilsons

    在数字的星河里
    代码,如诗般流淌
    每一次滚动
    都是灵魂的迁徙与停泊

    光标闪烁
    为思想找寻锚点
    像深夜的星
    在混沌中确立坐标

    算法——
    那隐形的诗人
    默默编织逻辑的韵律
    把页面舒展成画卷
    每个标题
    都是旅途的驿站

    我们寻找的
    不只是信息的所在
    更是
    为漂泊的灵魂
    安下温柔的归处

    滚动吧,追梦的少年
    在 0 与 1 的无垠里
    让理性
    与美
    同舞

    代码写了又擦
    唯有那滚动的姿态未变
    如潮汐般
    在数据的海洋里
    起落生息

    这便是我们的时代
    用技术书写
    以灵魂吟唱
    在翻滚的世界里
    聆听一瞬的寂静

    1 回复
    2 操作
    wilsons 在 2025-09-18 07:45:56 更新了该回帖
    wilsons 在 2025-09-18 07:27:27 更新了该回帖
  • vincents

    👍 完美!大佬是我的手替

  • Fighter93

    想到了一个实现初级白板的方式,就是编辑器容器下面的第一级内容块,全部设置为不占用空间的 position:abs.....(通过设置文档属性,文档属性设置后给文档容器设置格子背景,格子大小 10px*10px),再给第一级内容块设置 top 和 left 的自定义属性(自定义属性写出来会很长,纵横方向都是每隔 10px 写一次)。自动化操作:使用 js 在拖拽内容块到理想位置后自动为该内容块设置 top 和 left 的自定义属性。

    白板元素与思源内容块的对应关系:

    画布:编辑器容器设置为较大宽度,并可以水平滚动,按下空格键后可以拖拽容器滚动

    容器:超级块

    多边形:段落块设置自定义属性后裁剪的多边形

    到这里,一个初级的白板就算完成了,与主流的白板工具相比,少了连线功能(实现难度极大)。

    1 回复
  • wilsons

    👍 确实,这种方法是可行的,但白板的作用就是能看清各个结点的关系,没有连线的话看起来不够清晰。

    白板还是用 canvas 好些,网上有开源渲染库及成品项目,不如利用库或项目改造更方便。

    不过,我觉得,如果简单可以利用思维导图,连接文档或块之间的关系,也能满足基本需求了。


    比如这个用 html+svg 实现的类白板效果(连线用 svg 实现)

    1 回复
    1 操作
    wilsons 在 2025-09-20 16:52:25 更新了该回帖
  • Fighter93

    🙏 谢谢,给我提供了新的思路。你视频中这条动态调整的 svg 线条,是自己写的方法还是需要导入第三方 jar 包?我感觉这条线条靠自己好难实现啊

    1 回复
  • wilsons 1 2 评论

    不客气,是让 AI 写的,纯 js,不需要第三方包,思维导图一般是用 HTML 写文本框,用 svg 实现连线,熟悉 svg 语法就好了,不熟悉也没关系,让 AI 辅助。

    不过,如果想正式产品还是推荐第三方库,兼容性稳定性会更好。


    演示 demo(by Qwen)

    Qwenhtml20250920xs03f9tfa.html.zip

    1 回复
    请问,这个 JS 怎么使用呢?
    markleo
    @markleo 你是问哪个?这 demo?用到思源?
    wilsons
  • Fighter93

    ✌ok

  • wilsons 1

    @vincents @ioypl @huanzze @sqalei @Hollmix @zzshang @cxg318 @tiewei @coco2 @kuaizi @auric @wucunwei @fousden @linyuanmuyu @Helvetica @Sonsy @chenhao396 @hesy @Fighter93 @CongSec @sweesalt @shawnkurt @siyuan100861186

    已更新至 0.0.6

    更新内容如下:

    0.0.6 优化大纲滚动方式,智能判断滚动方向,更符合使用习惯。

    0.0.5 改进计算标题位置算法,解决大纲点击标题时,大纲标题定位偏差问题。


    0.0.5 之前版本,点击大纲标题定位时,大纲标题高亮可能会有偏差。建议更新!

    2 操作
    wilsons 在 2025-09-23 20:09:28 更新了该回帖
    wilsons 在 2025-09-23 20:08:38 更新了该回帖
请输入回帖内容 ...
wilsons
正式入驻知乎了,以后新贴主要在这里。 欢迎大家订阅关注! 你的关注对我是莫大鼓励,也能让我持续产出优质内容,我们一起成长 🙏 点这里立即关注:https://www.zhihu.com/people/wilsonses