在写项目的时候,遇到了需要添加滚动事件的问题,在简书Carol_笑一笑这里找到了解决方案。代码如下

<script>
export default {
name:"vue-scroll",
data () {
return {
……
}
},
mounted: function () {
window.addEventListener('scroll', this.handleScroll, true); // 监听(绑定)滚轮滚动事件
},
methods: {
handleScroll: function () {
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 设备/屏幕高度
let scrollObj = document.getElementById(div); // 滚动区域
let scrollTop = scrollObj.scrollTop; // div 到头部的距离
let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
//滚动条到底部的条件
if(scrollTop+clientHeight == scrollHeight){
// div 到头部的距离 + 屏幕高度 = 可滚动的总高度
}
}
},
destroyed: function () {
window.removeEventListener('scroll', this.handleScroll); // 离开页面清除(移除)滚轮滚动事件
}
}
</script>

  但是在实际应用中,发现移除滚动事件失效了,到达新的页面滚动事件还存在,从而导致一直报错。然后从阮一峰先生的博文中找到了问题所在。

然后上面的代码只需要修改destroyed中的方法即可。

destroyed: function () {
window.removeEventListener('scroll', this.handleScroll,true); // 离开页面清除(移除)滚轮滚动事件
}

  


返回目录

vue添加滚动事件,解决简书Carol_笑一笑方案中vue移除滚动事件失效的问题的更多相关文章

  1. 【Web】解决简书图片不显示问题“系统维护中,图片暂时无法加载”

    简书不显示图片的解决方法 首次编辑于2019-6-6 最近几天在浏览简书上的文章时,发现图片显示不出来,提示"系统维护中,图片暂时无法加载". 猜测应该是简书由于某种原因暂时屏蔽了 ...

  2. FLASH CC 2015 CANVAS 中 createjs 移除绑定事件

    myBtn.addEventListener("click", function(evt) { // do stuff... evt.remove(); // removes th ...

  3. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  4. 简书全站爬取 mysql异步保存

    # 简书网 # 数据保存在mysql中; 将selenium+chromedriver集成到scrapy; 整个网站数据爬取 # 抓取ajax数据 #爬虫文件 # -*- coding: utf-8 ...

  5. 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

    这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...

  6. WPF之路-键盘与鼠标事件 - 简书

    原文:WPF之路-键盘与鼠标事件 - 简书 键盘事件 事件类型分为以下几个类型 生命周期事件:在元素加载与卸载的时候发生 鼠标事件:鼠标动作 键盘事件:键盘动作 手写笔事件:适用于win7以上的系统 ...

  7. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

  8. 仿简书MarkDown编辑器可同步滚动

    模仿简书的MarkDown编辑器,使用Angular8写的示例 1.支持同步滚动 编辑的过程中,右侧预览界面会同步滚动.滚动右侧预览界面,左侧编辑区也会同步滚动哦 2.支持语法高亮 如下: using ...

  9. [开源,学习,分享]UWP第三方简书客户端分享

    简介 Windows10正式版发布到现在,我利用零零碎碎的一些时间对UWP进行一些学习,也基于这门技术开发了一个第三方的简书App. 基本界面 优酷视频: http://v.youku.com/v_s ...

随机推荐

  1. Git远程分支和refs文件具体解释

    推送远程分支到同一个server 比方首先建立gitserver,顺便clone出两个副本 mkdir server cd server git init --bare cd .. git clone ...

  2. Mixed Content混合内容错误 Iframe Http页面无法访问

    问题描述 为通过安全测试, 系统升级为https, 后由于新增了接口(页面集成方式, 即第三方系统某一个界面需要嵌入到我们系统的某个页面中) 采用iframe和重定向方式都报同样的错误, 意思就是我们 ...

  3. [Python自学] day-18 (1) (JS正则、第三方组件)

    一.JS的正则表达式 JS正则提供了两个方法: test():用于判断字符串是否符合规定: exec():获取匹配的数据: 1.test() 定义一个正则表达式: reg = /\d+/; // 用于 ...

  4. jQuery 正则

    正则 test 方法验证 var pattern = /^[A-Z]$/; //不需要引号 $('input[name="letter"]').blur(function(){ v ...

  5. js 获取滚动条的高度

    function getScrollTop() { var scroll_top = 0; if (document.documentElement && document.docum ...

  6. 【CUDA 基础】6.1 流和事件概述

    title: [CUDA 基础]6.1 流和事件概述 categories: - CUDA - Freshman tags: - 流 - 事件 toc: true date: 2018-06-10 2 ...

  7. Linux操作大全

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  8. codeforces405D

    Toy Sum CodeForces - 405D Little Chris is very keen on his toy blocks. His teacher, however, wants C ...

  9. Selenium报错:StaleElementReferenceException

    一个学生在操作页面跳转时遇到一个Selenium报错, 如下图所示: StaleElementReferenceException: Message: stale element reference: ...

  10. javascript数据结构之顺序表

    关于线性表的概念这里就不赘述了,可以自行百度和查阅资料,线性表按照存储(物理)结构分为顺序存储和链式存储,每种存储方式的不同决定了它的实现代码是不同的: 顺序存储的特点就是在内存中选一块连续的地址空间 ...