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的一些特性和用法整理小结
Jan 13 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
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
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
学习vue.js计算属性
2016/12/03 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
微信小程序API—获取定位的详解
2019/04/30 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
python实现推箱子游戏
2020/03/25 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
教师应聘个人求职信
2013/12/10 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫