phoenixave / non-hash-anchor

非hash模式的锚点功能实现，可以检测滚动过程中元素是否处于曝光状态，可以通过点击锚点滚动到制定元素位置

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