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

2024-11-27 06:49:39

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

  }
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue 纯js监听滚动条到底部的实例讲解

在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议. 1.怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: window.onscroll = function(
js监听滚动条滚动事件使得某个标签内容始终位于同一位置

小知识点,废话不多说,直接上代码 css: 复制代码代码如下: <pre name="code" class="css"><style> #anchor:{ position:absulate; top:40%; left:40%; width:100px; height:100px; background-color:red; } </style></pre><br> js: 复制代码代码如下: &l
Vue.js实战之通过监听滚动事件实现动态锚点

前言前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下: 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现在实现平滑滚动之前,得先确保基本的锚点功能如果没有其他要求,直接用
JavaScript实现点击文本自动定位到下拉框选中操作

本文实例为大家分享了js点击文本自动定位到下拉框选的具体代码,供大家参考,具体内容如下 <html > <head runat="server"> <title></title> <style type="text/css"> #SiteStat { width: 97px; height: 181px; } </style> </head> <body> <fro
js监听html页面的上下滚动事件方法

最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dome</title> <script type="text/javascript
Bootstrap教程JS插件滚动监听学习笔记分享

本文主要来学习一下JavaScript插件--滚动监听. 1.案例滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.你可以试试滚动这个页面,看看左侧导航的变化. 先把实现的代码上了,你可以通过测试代码先来看看效果. <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=de
js实现滚动条滚动到某个位置便自动定位某个tr

要实现带滚动条的table,定位到某个tr,其实是很简单的,只有几行js代码就可以完成,具体内容如下 js代码 <strong><script type="text/javascript"> function test(){ var $objTr = $("#location"); //找到要定位的地方 tr $objTr.css("background-color","lightgray"); //设
Bootstrap滚动监听组件scrollspy.js使用方法详解

其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3.菜单上必须有.nav样式 4.滚动区域的data-target与导航父级Id(一定是父级)要一致. <div id="selector" class=&qu
JS监听滚动和id自动定位滚动

本文主要介绍原生JS进行滚动监听和id定位滚动,与效果锚点类似,适用于vue. 关键性代码如下: var scroll = document.documentElement.scrollTop || document.body.scrollTop; //获取屏幕距离顶部的距离 .js // 下述方法是引入mui+vue的案例 ,展示代码为methods里面的方法 init:function(){ doc.addEventListener("scroll",function(){ //
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1.点击导航平滑滚动到导航内容处 2.div内滚动时当前导航需要做响应代码如下: 1.html结构(因为从项目里截取代码数据内容就不贴出来了,不算难点,这个可以根据自己的项目进行调整,相应的方法和类名别弄错就行) <div class="all-title"> 全部应用 <p class="fr"> <span v-
js监听input输入框值的实时变化实例

1.在元素上同时绑定 oninput 和onporpertychanger事件例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo
Vue监听一个数组id是否与另一个数组id相同的方法

数据list,结构为[{id:1,-},{id:2,-}],数据shoplist,结构为[{id:1,-},{id:2,-}],判断当shoplist.id等于list.id时显示list的数据. .vue文件: <template> <div class="hello"> <div class="shoplist"> <button @click="clickButtonShopList">cli
Fabric.js 监听元素是否相交重叠

目录正文动手试试看代码仓库正文 fabric.js 提供了一个方法可以检查对象是否与另一个对象相交(也可以叫元素是否重叠). 这个方法叫 intersectsWithObject(). 本文主要想提一下 fabric.js 存在这么一个方便的方法. 检测元素是否相交有什么用呢? 这个功能在日常开发中其实很实用,在它的帮助下我们可以实现“防止对象碰撞”.“对象自动对齐贴合”等功能. 动手试试看为了演示 intersectsWithObject() ,我打算做如下操作: 创建画布创建矩形
js监听鼠标点击和键盘点击事件并自动跳转页面

js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,在学习的朋友可以参考下 $(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.jb51.net')},2000); //定时不太好使,
两种js监听滚轮事件的实现方法

前段时间在写前端的时候,需要监听浏览器的滚轮事件网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } 二.Jquery通过$(
JS监听事件的叠加和移除功能

html DOM元素有很多on开头的监听事件,如onload.onclick等,见DOM事件列表.但是同一种事件,后面注册的会覆盖前面的: window.onresize = function(){ alert(1); } window.onresize = function(){ alert(2); } // 改变窗口大小时,只会弹出2 addEventListener监听利用addEventListener添加监听事件,可以重复添加,并不会互相覆盖: window.addEventList

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

相关推荐

随机推荐