一个骚气的文章目录自动生成器了解一下
这个插件根据选定的目录内容中的 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
网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢迎留言指出~
参考:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在网页中动态的生成一个gif图片
- 在 Visual Basic .NET 或 JScript 代码中使用早期绑定
- 腾讯云TKE-GPU案例: TensorFlow 在TKE中的使用
- 使用pyppeteer 下载chromium 报错 或速度慢
- layui数据表格自定义每页条数limit设置
- dotnet OpenXML 幻灯片 PPTX 的 Slide Id 和页面序号的关系
- springboot 国际化
- Windows/Android/iOS全平台支持的视频播放器EasyPlayerPro,iOS版播放无音频问题如何解决?
- java之springboot之快速入门(一)- maven方式创建项目
- java之springboot之快速入门-Spring Initializr方式创建项目
- springboot之Web综合开发
- springboot之mybatis
- springboot之mybatis多数据源最简解决方案
- 蓝桥杯突击复习准备——部分算法汇总
- 小解c# foreach原理