vue监听滚动事件，控制页面元素显示隐藏

最新推荐文章于 2023-03-02 16:25:55 发布
最新推荐文章于 2023-03-02 16:25:55 发布
阅读量1.1k 收藏 6
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43242112/article/details/109304722
版权
本文介绍了如何在Vue应用中使用methods定义监听事件，然后在created钩子中为window添加滚动事件监听，以及在组件销毁时移除事件监听，以此来控制页面元素的显示与隐藏。
摘要由CSDN通过智能技术生成

methods中定义监听事件

// 窗口滚动监听事件
windowScrollListener(){
   
     // 获取滚动条的高度
     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
     if(scrollTop >= 600)
最低0.47元/天 解锁文章
一羊迁徙
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目自定义滚动指令控制按钮显示隐藏
Z.Dragon 的博客
09-05 1949
在vue项目中，有些页面需要toTop的按钮（滚到顶部），因此在页面中需要用到滚动事件，但是如果很多页面都需要用到这个按钮，就要在这些页面中都加上滚动事件，会导致页面代码臃肿，不便维护。 这里使用vue自定义指令封装一个全局的滚动事件，在需要的页面引用组件，加上指令即可。 下面上代码： 1、首先封装一个toTop的按钮组件（默认显示） <template> <div id...
监听页面的显示隐藏？
xiaoweizy_id的博客
09-23 197
document.addEventListener('visibilitychange', function() { var hidden = document.hidden; console.log(document.visibilityState) if (hidden) { document.title = '隐藏'; } e...
事件监听 & 页面滚动（页面滚动到某一位置时显示隐藏某元素，Vue环境）
m0_67402588的博客
07-31 700
当newVue()扫描到v-show，就会先计算=右边的判断条件的值，如果=右边的判断条件值为true，则当前元素默认正常显示，如果=右边的判断条件值为false，则v-show自动被翻译为displaynone，当前元素隐藏。（2）使用属性scrollTop获取位于对象最顶端和窗口中可见内容的最顶端之间的距离，也就是我们所要的操作的div最顶端到页面最顶端的距离。最近在做项目时有一个网页渲染是这样的，某一个元素在开始不显示，只有当页面滑动到指定的位置时才显示该元素。...
vue滚动，自定义指令组件，滚动控制显隐
qq_44576696的博客
05-26 358
方法一 要实现滚动事件的话，我们想到的方案就是在mounted函数里面进行scroll方法的监听，在beforeDestroyed里面对于scroll移除。 mounted(){ window.onscroll = ()=>{ if(document.documentElement.scrollTop > 40){ console.log("显示show") }else{ c
事件监听 & 页面滚动（页面滚动到某一位置时显示/隐藏某元素，Vue环境）
热门推荐
商务合作 | 共同学习 | 携手共进
04-13 10万+
通过监听页面滚动事件，实现当页面滑动到某一位置时显示或隐藏某一元素，附知识点详细讲解。
vue回到顶部监听滚动事件详解
10-16
本文将详细介绍如何在Vue项目中实现监听滚动事件，并通过该事件实现回到顶部的功能。 首先，我们要知道，当用户滚动页面时，浏览器会触发scroll事件。我们可以通过添加事件监听器来响应这个事件。在Vue中，我们通常...
Vue如何实现监听组件原生事件
10-15
例如，如果我们有一个`BackTop`组件，它需要在用户滚动页面时显示或隐藏，我们可以将其作为一个独立的组件封装，并在父组件`Home`中监听它的原生事件。 在`Home.vue`中，我们可以这样设置监听器： ```html ...
使用vue.js在页面内组件监听scroll事件的方法
10-18
通过在组件的DOM元素上使用`ref`属性来引用DOM，并在Vue实例的`mounted`钩子中通过`this.$refs`获取DOM元素，最后使用`addEventListener`方法来监听滚动事件。这种方法可以灵活地应用在各种需要在组件内监听滚动事件...
VUE 实现滚动监听 导航栏置顶的方法
10-18
本知识点将详细探讨如何利用Vue.js框架实现滚动监听功能，并在用户滚动页面时将导航栏固定于页面顶部。 首先，需要明白实现滚动监听导航栏置顶功能需要掌握的关键技术点包括： 1. 使用Vue的`data`函数来定义组件的...
vue：元素滚动到底部触发事件，隐藏滚动条及滚动条显示和隐藏切换
qq_37899622的博客
06-23 2593
一、设置一个div元素，绑定滚动事件 二、在methods中描述滚动事件 三、设置CSS，让其内容超出高度时存在滚动条（overflow: auto;），然后隐藏滚动条（::-webkit-scrollbar{ display: none; }）
vue中点击空白处改变dom状态实现显隐，监听dom(addEventListener)
qq_45094682的博客
03-02 1403
/ let taskModal = document.getElementById('taskModal') // 这两个获取dom的你用那个都行。现在是点击小铃铛出现弹框没问题，点击关闭图标关闭弹框也没问题，但是点击空白区域消失不了，这个时候需要dom监听属性。拿到项目中直接可以用，Tabs也是一个组件。监听鼠标事件就可以了。
Vue滑动隐藏图标效果
weixin_44590591的博客
01-10 919
Vue实现固定定位图标滑动隐藏效果 页面滚动前 页面滚动后 <template> <!-- 注意：我这里是Vue3，所以最外层没有套一个div盒子 --> <!-- <router-view></router-view> --> <div class="main"> <div class="toAsk" :class="[ !transition ? 'fixed-transition' : '
vue的滚动scroll事件 实现某元素吸顶或者固定位置显示
boy火巨的博客
07-09 6万+
vue监听滚动事件 实现某元素吸顶或者固定位置显示2017年09月16日 15:33:33阅读数：26910最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。1、监听滚动事件利用VUE写一个在控制台打印当前的scrollTop,首先，在mounted钩子中给window添加一个滚动滚动监听事件，mounted () { ...
Vue实现浮动按钮组件 - 页面滚动时自动隐藏 - 可拖拽
weixin_34275734的博客
12-26 4407
效果图 说明 本文可能有点啰嗦了... 组件难点 如何监听滚动完成事件 移动端如何监听拖拽事件 前置条件 为了充分发挥vue的特性，我们不应该通过ref来直接操作dom，而是应该通过修改数据项从而让vue自动更新dom。因此，我们这样编写template。 <template> <div class="ys-float-btn" :style="{'left':left...
Vue 实时监听窗口变化并控制组件的显示与隐藏 记录一下
sylfffffffff的博客
06-01 5844
查阅了很多大神们的文章，大致都是只有前部分，后面的如何控制隐藏并没有。 本来是用min-width来限制的 反正有滚动轴，缩再小也不会乱。 后来觉得自适应看起来舒服点，还是研究下自适应吧。做个笔记。 1.首先，一步一步来。 在data里 添加一个变量 screenWidth export default { name: "login", data() { return { ...
Vue利用visibilitychange监听页面显示和隐藏
第二世界
12-04 8299
mounted() { document.addEventListener('visibilitychange', _this.handleVisiable) }, destroyed() { document.removeEventListener('visibilitychange', _this.handleVisiable) }, methods: { handleVisiable(e) { if (e.target.visibilityState
滚动条控制 div的显示与隐藏。
我本无名的专栏
11-13 4929
    昨天在论坛上看见一个兄弟在提这个问题，就自己作了一个小例子，感觉很有意思，今天放了上来       New Document                function get_scrollTop_of_body(){        var a = document.getElementById(div1);        va
vue监听页面滚动及滚去距离
最新发布
09-09
在获得了滚动距离后，你可以根据需要来做一些操作，比如根据滚动位置来控制某个元素的显示或隐藏，或者加载更多的内容等等。 同时，为了避免内存泄漏，确保在组件销毁之前移除滚动事件的监听： ``` beforeDestroy...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值