一个骚气的文章目录自动生成器了解一下

这个插件根据选定的目录内容中的 h1, h2, h3, h4, h5, h6 标签来自动生成目录插入到选定的目录容器中,并且提供一个漂亮的样式效果

  • 监听内容区滚动
  • 点击跳转功能

兼容性:IE10+ (由于使用了 node.classList)

地址戳这里 github地址,欢迎star,issue,pr ~

1. 预览

炫酷模式:

普通模式:

可以通过 线上DEMO 来预览一下炫酷模式的效果

2. 实现思路

滚动的监听通过 getBoundingClientRect 获取元素大小以及相对视口的位置,判断我们的监听对象 h1~h6 标签是否在视口中,如果在则添加 linkActiveClass 类。

传统的锚点定位跳转会与hash模式的单页面应用的路由冲突,会导航到错误的路由路径,这里采用把要跳转的id放到 dataset 中,跳转的时候取出来使用 scrollIntoView 来进行平滑滚动到目标位置。

左边的边栏线则是使用 svg 的path来画出来的,根据层级相应做一些调整,辅以css的 transition 的效果就可以呈现出不错的移动效果。

3. Api

如果要使用默认的样式,请手动引入

import 'progress-catalog/src/progress-catalog.css'

使用方法:

// 引入
import Catalog from 'ProgressCatalog'

// 使用 
new Catalog({
    contentEl: 'loading-animation',
    catalogEl: `catalog-content-wrapper`,
    selector: ['h2', 'h3']
})

构造函数接受的参数:

contentEl [String]

需要检索生成目录的内容区的id选择器,不需要加#

catalogEl [String]

将生成的目录append进的目录容器的id选择器,不需要加#

scrollWrapper [可选, String]

监听scroll事件的内容区容器的id选择器,不需要加#,如果不填则默认是 contentEl 的父元素

linkClass [可选, String]

所有目录项都有的类,默认值:cl-link

注意,如果设置了此值,则需要重写默认样式

linkActiveClass [可选, String]

激活的目录项所有的类,默认值:cl-link-active

注意,如果设置了此值,则需要重写默认样式

selector [可选, Array]

选择目录的标题标签,默认值:['h1', 'h2', 'h3', 'h4', 'h5', 'h6']

如果只希望生成目标内容区的 h2, h3 标签的目录,那么可以设置 selector: ['h2', 'h3']

activeHook [可选, Function]

当激活新的目录项标签的时候的回调函数

topMargin [可选, Number]

第一个目录标签在被认为可见之前需要向下移动的距离,默认值:0

bottomMargin [可选, Number]

同上,向下移动的距离,默认值:0

cool [可选, Boolean]

炫酷模式开关,默认值:true


网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~

参考:

  1. 阮一峰 - SVG 图像入门教程
  2. Codepen - Progress Nav
  3. MDN - scrollIntoView
  4. MDN - HTMLElement.dataset

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据结构笔记

Django搭建博客(七):form的使用

不过 form只提供输入框,外层的 form标签和提交按钮都需要自己添加,我们加上 form标签和提交按钮看看:

1523
来自专栏PHP在线

书写高质量jQuery代码的6条经验

一、正确引用jQuery 尽量在body结束前才引入jQuery,而不是在head中。 借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现...

3819
来自专栏积累沉淀

JavaScript BOM浏览器对象模型

BOM  1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少...

2386
来自专栏编程微刊

border-radius属性失效问题的解决办法

今天调试项目的时候突然发现,设置的border-radius竟然失效了,打开f12,眼看着浏览器把这个属性也给划掉了,不是一般的郁闷,按照道理来说,不应该会出现...

3133
来自专栏静晴轩

Android Studio快捷键

最常用快捷键 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O ...

3547
来自专栏QQ音乐前端团队专栏

Web Components 初探

任何 UI 框架或库最期望目标之一是帮助我们建立通用的模式或约定。

1K4
来自专栏前端小叙

Vue.js 2.0 学习重点记录

Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 V...

3665
来自专栏五毛程序员

ActionBar开启Overlay Mode(覆盖模式)

3675
来自专栏中国白客联盟

js之键盘记录

javascript可以在处于当前浏览器窗口监控用户按下的所有键盘,包括账号密码。

1863
来自专栏CIT极客

【奇淫巧技】成为网站开发工程师的捷径!

3869

扫码关注云+社区

领取腾讯云代金券