vue中使用Scroll事件

一.固定头部导航栏

1.【vue的touch事件】

  <div class="flex-wrapper" ref="scrollmain" @touchstart='touchstart' @touchmove='touchmove' @touchend='touchend'>

2.【Method】

touchmove(e){
        var scollTop=0;
        scollTop=e.touches[0].screenY;
        let head= document.querySelector("header");
        let content= document.querySelector("section");
        if(scollTop > 110){
        //     // alert(1);
           head.className ="detail-header fixed";
           content.className ="fixed";
           console.log(head);
        }else{
           head.className ="detail-header";
           content.className =" ";
        }
        console.log("touchmove",scollTop);
    },

二.跳转页面时返回到页面顶部

1.【找到相应的div】
2.【定义方法】

scroll(){
      this.$refs.scrollmain.scrollTop=0;
    },

猜你喜欢

转载自blog.csdn.net/weixin_43837268/article/details/84643227