自写一个vue 描点定位 ，鼠标滚动控制描点切换

效果：https://xmtc88.com/index
开发一个官网的时候，遇到这种整屏切换需求，并且滚轮控制切换。
swiper有类似效果，但是感觉不符合我的理想效果

话不多说 上代码。

滚动监控主要用到

addEventListener('mousewheel', this.handleScroll, false)
根据 callback中的 deltaY来判段  是向上还是向下

 

而描点跳转 我曾想用 .scrollIntoView  但是因为滑轮监听挂载在 mouted方法，而 scrolltoView 在mouted 中会失效。最终放弃用scrollintoView

其次vue 也有专门的 Vue-scrollto 组件，但是他的调用方式是绑定在标签上， 如果要实现滚轮滑动来变化 显然不符合效果。

最后还是用最原始的方法， 获取所有节点offsetTop 高度，滚轮时用

 // Chrome

 document.body.scrollTop = total;

 // Firefox

 document.documentElement.scrollTop = total;

 // Safari

 window.pageYOffset = total;
实现滚动效果

最后贴上关键代码

mounted() {
    this.jumpgroup = document.querySelectorAll('.pagep');
    // chrome and ie（谷歌和IE）
    // window.addEventListener('mousewheel', this.handleScroll, false);
    document
      .getElementById('index-page')
      .addEventListener('mousewheel', this.handleScroll, false);
    // firefox（火狐）
    document
      .getElementById('index-page')
      .addEventListener('DOMMouseScroll', this.handleScroll, false);
    this.jump(0);
  },
  methods: {
    jump(index) {
      this.index = index + 1;
      let total = this.jumpgroup[index].offsetTop + 120;
      // Chrome
      document.body.scrollTop = total;
      // Firefox
      document.documentElement.scrollTop = total;
      // Safari
      window.pageYOffset = total;
    },
    handleScroll(e) {
      // console.log(e);
      //用来判断滚轮是向上滑动还是向下
      let direction = e.deltaY > 0 ? 'down' : 'up';
      //鼠标滚轮向下或后
      if (this.loading) {
        this.loading = false;
        if (direction == 'down') {
          // console.log(this.target);
          if (this.index == 7) {
            this.index = 7;
          } else {
            this.index = this.index + 1;
            this.jump(this.index - 1);
          }
          setTimeout(() => {
            this.loading = true;
          }, 300);
        } else {
          if (this.index == 1) {
            this.index = 1;
          } else {
            this.index = this.index - 1;
            this.jump(this.index - 1);
          }
          setTimeout(() => {
            this.loading = true;
          }, 300);
        }
      }
    },
  },