介紹

實現(xiàn)點擊一個錨點（導(dǎo)航），跳轉(zhuǎn)到對應(yīng)的區(qū)塊；容器滾動時，對應(yīng)的錨點高亮；
項目演示地址
http://admin-vuetify.bysir.top:1080/#/anchorScroll

安裝及使用

安裝

npm i scroll-anchor --save

使用

• Dom結(jié)構(gòu)

<div class="main">
    <div class="sections">
        <div class="section">1</div>
        <div class="section">2</div>
        <div class="section">3</div>
        <div class="section">4</div>
    </div>
    <div class="anchor-list">
        <div class="anchor-item">1</div>
        <div class="anchor-item">2</div>
        <div class="anchor-item">3</div>
        <div class="anchor-item">4</div>
    </div>
</div>

• 引用

1. 通過import方式

 import ScrollAnchor from 'scroll-anchor'

2. 通過CDN方式

<script src="https://unpkg.com/scroll-anchor@1.0.4/dist/index.js"></script>

• 使用

 
   new ScrollAnchor({
        section: 'section',
        anchor: 'anchor-item',
        paddingTop: 50,
        lastActive: true,
        duration: 3000,
      })

配置項

• section: 'section', // 跳轉(zhuǎn)的板塊類名，必填
• anchor: 'anchor-item', // 錨點類名；必填
• paddingTop: 50, // 距離容器多少 下一個高亮；默認(rèn)：0
• lastActive: true, // 最后一個是否高亮；默認(rèn)：false
• duration: 3000, // 速度（ms）默認(rèn)：1000(ms）
• scrollContainer: 'scrollContainer' // 板塊的容器，默認(rèn)：window

注意：
單頁面（vue項目中），在組件銷毀的情況下，需要調(diào)用實例的滾動事件移除

 this.$once('hook:beforeDestroy', () => {
        instance.$emit('removeEvent')  // 移除滾動事件
      })