vue监听滚动事件 实现某元素吸顶或者固定位置显示

https://blog.csdn.net/wang1006008051/article/details/78003974

1、监听滚动事件

利用VUE写一个在控制台打印当前的scrollTop,

首先,在mounted钩子中给window添加一个滚动滚动监听事件,

mounted () {
  window.addEventListener(‘scroll‘, this.handleScroll)
},

然后在方法中,添加这个handleScroll方法

handleScroll () {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  console.log(scrollTop)
},

原文地址:https://www.cnblogs.com/qianjin888/p/9599312.html

时间: 2024-08-02 16:32:53

vue监听滚动事件 实现某元素吸顶或者固定位置显示的相关文章

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

vue监听滚动事件,实现滚动监听(scroll滚动)

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript" src="

vue监听滚动事件 实现动态锚点

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

vue监听滚轮事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js">&

vue监听滑动事件,隐藏移动端键盘或者input失去焦点

在页面加载的地方mounted或者created写监听事件,注意使用touchmove事件 window.addEventListener("touchmove",this.myTouchMove) // 监听滑动事件 // 滑动关闭键盘 myTouchMove: function (evt) { if(document.hasFocus){ const inputId = document.getElementById('myBox') // 获取ID inputId.blur()

VUE 实现监听滚动事件,实现数据懒加载

methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop } else if (document.body) { scrollTop = document.body.scrollTop } retu

jquery监听滚动事件获取scrollTop

css: .anchor_reached { color: #0073eb; } jquery: $(window).scroll(function(event){ $(".anchor_directory").siblings().each(function(){ var this_top = $(this).attr("data-top"); if(($('body').scrollTop()) >= this_top){ $(this).addClass

关于监听滚动事件加载更多的代码

$(".rankDetail").scroll(function(){ //rankDetail是大容器的class         var scrollHeight = $(this).scrollTop();         var rankListCount = $(".rankList").length;  //rankList是容器中的一个项目,类似于一个li         var rankListHeight = $(".rankList&q

vue中的滚动事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>