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 相关文章推荐
JS 文件本身编码转换 图文教程
Oct 12 Javascript
jquery实现submit提交表单
Feb 03 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
深入浅析react native es6语法
Dec 09 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
js实现简单音乐播放器
Jun 30 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-msf源码详解
2017/12/25 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
在Python中使用元类的教程
2015/04/28 Python
Python分析学校四六级过关情况
2017/11/22 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书
满月酒答谢词
2014/01/14 职场文书
运动会稿件100字
2014/02/21 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
学生手册评语
2014/05/05 职场文书
党员承诺书范文2015
2015/04/27 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python