一个vue-scrollto的基本demo(转载)

标题：公司H5项目用到了 横纵滚动定位，发现引用的滚动的vue-scrollto插件，原理暂且不关心，实战实现是点击事件处罚 插件滚动到指定Id 还有偏移值。

 

话不多说，看到一个使用demo,转载过来使用，感谢博主；下方是个人在真实项目里的使用方式 

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frank_fong/article/details/87256443

<template>
  <div id="app">
    <ul class="menu">
      <li v-scroll-to="'#a'">item 1</li>
      <li v-scroll-to="'#b'">item 2</li>
      <li v-scroll-to="'#c'">item 3</li>
    </ul>
 
    <div
      class="content"
      id="a"
    >content 1</div>
    <div
      class="content"
      id="b"
    >content 2</div>
    <div
      class="content"
      id="c"
    >content 3</div>
  </div>
</template>
 
<script>
import Vue from "vue";
import VueScrollTo from "vue-scrollto";
 
Vue.use(VueScrollTo, options);
 
//https://github.com/rigor789/vue-scrollto
 
let options = {
  container: "body", //滚动的容器
  duration: 500, //滚动时间
  easing: "ease", //缓动类型
  offset: 0, //滚动时应应用的偏移量。此选项接受回调函数
  force: true, //是否应执行滚动
  cancelable: true,
  onStart: false,
  onDone: false,
  onCancel: false,
  x: false,
  y: true
};
 
export default {
  name: "app"
};
</script>
 
<style>
.menu {
  position: fixed;
  width: 200px;
  background-color: #eee;
}
.content {
  width: 500px;
  height: 500px;
  margin-left: 300px;
  margin-bottom: 50px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}
</style>

 

备注：真实项目实例

先导入

import vueScrollTo from 'vue-scrollto'

 

定义声明滚动ids

 navs: [
        { name: '登记信息', desc: '风险概览', toEl: 'registerInformation', expand: true },
        { name: '股权结构', desc: '股权结构', toEl: 'equityStructure', expand: true },
        { name: '股东信息', desc: '股东信息', toEl: 'shareholdersInformation', expand: true },
        { name: '董事', desc: '董事', toEl: 'director', expand: true }
      ]

 

使用横向滚动条

 <div class="navs  line-bottom" v-sticky>
            <ul>
              <li v-for="(nav, nIndex) in navs" :key="`${nav.toEl}-${nIndex}`">
                <a
                  href="#"
                  @click="scrollTo(nav.toEl)"
                  :class="activeEl === nav.toEl && 'active'"
                >
                  {{ nav.name }}
                  <span class="scroll-indicator"></span>
                </a>
              </li>
            </ul>
          </div>

这是滚动条内部box的指定Id 此处只选取2个滚动的id作为示例

          <!-- 股权结构 -->
          <template v-if="lastBuyedInfo&&lastBuyedInfo.CapitalStructure">
            <ui-section title="股权结构" id="equityStructure">
              <shareholdingStructure :capital-structure-data="lastBuyedInfo.CapitalStructure" />
            </ui-section>
          </template>
          <!-- 股东信息 -->
          <template v-if="lastBuyedInfo&&lastBuyedInfo.Shareholders">
            <ui-section title="股东信息" id="shareholdersInformation">
              <!-- <div>{{lastBuyedInfo.Shareholders}}</div> -->
              <shareholder-Info :shareholders-data="lastBuyedInfo.Shareholders" />
            </ui-section>
          </template>

点击横向滚动条 处罚滚动方法:

 scrollTo(toEl, offset) {
      this.activeEl = toEl
      this.vueScrollTo(`#${toEl}`, 'app-risk-analysis', offset)
    },
    vueScrollTo(id, container, offset) {
      vueScrollTo.scrollTo(id, container, {
        container: `.${container}`,
        easing: 'ease-in',
        force: true,
        offset: offset ? -offset : -this.fixedHeaderHeight + 5,
        cancelable: true,
        onStart: element => {
          // scrolling started
        },
        onDone: element => {
          // scrolling is done
        },
        onCancel: () => {
          // scrolling has been interrupted
        },
        x: true,
        y: true
      }
      )
    },

如果出现滚动无效或者 顶部fix 出现样式问题的话 自行解决，大致是根元素高度没有百分百；或者fix定位等小问题