监听页面滚动时的this指向

原创于 2021-12-16 09:27:05 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

这篇博客主要介绍了如何使用JavaScript的滚动事件来控制页面顶部图标的显示和隐藏。通过定义一个标志变量`flag`，并在滚动事件中判断页面滚动高度，当高度超过特定阈值时显示图标，否则隐藏。这种方法可以实现用户体验友好的返回顶部功能。

情景：我要监听页面的滚动来控制一个置顶的图标的显示和隐藏

//  比如data中我已经定义了一个标志flag来控制图标的显示隐藏

	returnTop() {
		var that = this;
		$(window).on('scroll',function() {
			// 这一步获取页面滚动的高度，这里要用$(this) 或者$(window) 
			var scrollTop = $(this).scrollTop()
			if(scrollTop  > 100) {
				// 这时候要用先前定义好的this指向，因为这时候this指向已经变成了window
				that.flag = true
			}else {
				that.flag = false
			}
		})
	}