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


Posted in Javascript onDecember 18, 2018

本文主要介绍原生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
    }

  }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
JS实现的tab页切换效果完整示例
Dec 18 #Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 #Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 #Javascript
微信小程序解除10个请求并发限制
Dec 18 #Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 #Javascript
vue中引入第三方字体文件的方法示例
Dec 17 #Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 #Javascript
You might like
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
Javascript Math对象
2009/08/13 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
中式结婚主持词
2014/03/14 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
服务承诺书
2015/01/19 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers