0
点赞
收藏
分享

微信扫一扫

点击返回顶置标签如何返回

那小那小 2022-03-15 阅读 51

 监听页面滚动的方法

一、原生js通过window.onscroll监听

window.onscroll = function() {
  //为了保证兼容性,这里取两个值,哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("滚动距离" + scrollTop);
}

2,设置滚动动画

window.onscroll = function () {
     console.log(document.documentElement.scrollTop);
     var scrollTop = document.documentElement.scrollTop;
    /*1.默认的透明度*/
    var opacity = 0;
    if (scrollTop < height) {
        /*2.当页面滚动的时候---随着页面卷曲的高度变大透明度变大*/
        opacity = "0";
    } else {
        /*3.当页面滚动的时候---超过某一个高度的时候透明度不变*/
        opacity = "1";
    }
//设置显示样式
    this.$refs.backTop.style.opacity =opacity ;
}
举报

相关推荐

0 条评论