0.0.3 • Published 2 years ago
non-hash-anchor v0.0.3
non-hash-anchor
非hash模式的锚点功能实现,可以检测滚动过程中元素是否处于曝光状态,还可以通过点击锚点滚动到制定元素位置
该组件解决了使用 hash router 时无法使用 hash anchors 的问题
案例演示
安装
yarn add non-hash-anchor
# 或者
npm install non-hash-anchor --save
用法
html
需要在列表中设置data-anchor
属性(唯一性),对应的值与菜单一一对应。
<div class="tabs">
<div class="tab-item anchor1">anchor1</div>
<div class="tab-item anchor2">anchor2</div>
<div class="tab-item anchor3">anchor3</div>
</div>
<div class="scroll-container">
<h2 class="text-center">scroll-container</h2>
<div class="top-content extra-content">
top content
</div>
<div class="anchor-container">
<h3 class="anchor-item" data-anchor="anchor1">anchor1</h3>
<h3 class="anchor-item" data-anchor="anchor2">anchor2</h3>
<h3 class="anchor-item" data-anchor="anchor3">anchor3</h3>
</div>
<div class="bottom-content extra-content">
bottom content
</div>
</div>
javascript
var anchor = new Anchor(document.querySelector('.anchor-container'), {
scrollContainer: document.querySelector('.scroll-container'),
onChange(anchor) {
// TODO...eg: 设置tab的选中状态
console.log(Date.now(), anchor)
},
onExposure(anchors) {
// TODO...eg: 获取数据
console.log(anchors)
},
});
var tabs = document.querySelectorAll('.tab-item');
tabs.forEach(function (item) {
item.addEventListener('click', function () {
anchor.scrollTo(item.innerText)
})
});
API
名称 | 说明 | 类型 | 必传 | 默认值 |
---|---|---|---|---|
container | 列表容器 | HTMLElement | true | - |
options | 其他参数 | HTMLElement | false | Object |
Options
名称 | 说明 | 类型 | 必传 | 默认值 |
---|---|---|---|---|
scrollContainer | 滚动容器 | HTMLElement | false | document.documentElement |
offsetTop | 滚动结束后距离滚动容器顶端的距离 | number | false | 0 |
isDynamic | 列表是否会动态增删 | boolean | false | false |
onChange | 当前选中项发生变化时的回调事件 | function (anchor:string) {} | false | - |
onExposure | 当前选中项发生变化时的回调事件 | function (anchors:string[]) {} | false | - |
License
MIT