vue中使用Scroll事件

一.固定头部导航栏

1.【vue的touch事件】

  

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】

用scrollTop方法,只是滚动条不一定是最外面window窗口的,你要看滚动条出现在哪个div,就在那个div上调用
2.【定义方法】

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

 

你可能感兴趣的:(web前端,vue功能实现案例)