JS监听滚动和id自动定位滚动

本文主要介绍原生js进行滚动监听和id定位滚动，与效果锚点类似，适用于vue。

关键性代码如下：

var scroll = document.documentelement.scrolltop || document.body.scrolltop; //获取屏幕距离顶部的距离

.js // 下述方法是引入mui+vue的案例 ，展示代码为methods里面的方法

init:function(){
  doc.addeventlistener("scroll",function(){ // 实时监听，如果是ios需要做300ms延迟，否则点击索引的时候，对象距离顶部的高度不够，会出现闪动的效果，体验感不佳
    if(!noscroll){
      var appealdo = vm.$el.queryselector("#appealdo").offsettop- 45; //获取#appealdo距离顶部的距离
      var appealcomm = vm.$el.queryselector("#appealcomm").offsettop- 45; //获取#appealcomm距离顶部的距离
      var scrolltop = doc.body.scrolltop || doc.documentelement.scrolltop; //获取屏幕距离顶部的距离
      if(scrolltop <= appealdo){
        vm.activeidx = 0; // activeidx 是表示高亮，用作顶栏菜单
      }else if(scrolltop > appealdo && scrolltop <= appealcomm){
        vm.activeidx = 1;
      }else if(scrolltop > appealcomm){
        vm.activeidx = 2;
      }
    }
    noscroll = false;
  });
},

toggletypes:function(idx){
  noscroll = true;
  if (vm.activeidx != idx) {
    if (idx === 0) {
      doc.body.scrolltop = 0;
      doc.documentelement.scrolltop = 0;
    }else if(idx === 1){
      vm.$nexttick(function(){
        dotop = vm.$el.queryselector("#appealdo").offsettop - 45;
        doc.body.scrolltop = dotop;
        doc.documentelement.scrolltop = dotop;
      });
    }else{
      vm.$nexttick(function(){
        dotop = vm.$el.queryselector("#appealcomm").offsettop - 45;
        doc.body.scrolltop = dotop;
        doc.documentelement.scrolltop = dotop;
      });
    }
    vm.activeidx = idx;
  }
},

在vue脚手架的项目里面可以这样操作，下述案例实现的是做高度监听控制顶部菜单的透明度变化

mounted() {
  window.addeventlistener('scroll', this.menu)
},
methods: {
  menu() {
    this.scroll = document.documentelement.scrolltop || document.body.scrolltop;
    var opacity = this.scroll / 44;
    if (opacity <= 1) {
      this.$nexttick(() => {
        this.opacity = opacity
      });
    } else {
      this.opacity = 1
    }

  }
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。