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 相关文章推荐
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
vue实现购物车的小练习
Dec 21 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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
动手学习无线电
2021/03/10 无线电
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
简单实现python爬虫功能
2015/12/31 Python
python编码最佳实践之总结
2016/02/14 Python
获取Django项目的全部url方法详解
2017/10/26 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
查环查孕证明
2014/01/10 职场文书
护理专业求职信
2014/06/15 职场文书
数学教研活动总结
2014/07/02 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
2014年教研组工作总结
2014/11/26 职场文书
认真学习保证书
2015/02/26 职场文书
护士自荐信范文
2015/03/25 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis