1 onscroll事件失效

<!DOCTYPE html>

<html>

<head>

    　　<meta charset="utf-8">

</head>

<body onscroll="checkscroll()">

    　　<div class="father" >

        　　　　<div class="son">我是移动块</div>

    　　</div>

</body>

</html>

<style type="text/css">

html,

body {

    　　width: 100%;

    　　height: 100%;

    　　/*overflow-x:hidden;*/

    　　/*overflow: scroll;*/

}

.father {

    　　width: 100%;

    　　height: 100%;

    　　box-sizing: border-box;

}

.son {　　

　　height: 3000px;

    　　background-color: yellow;

    　　width: 100%;

    　　font-size: 80px;

    　　display: flex;

    　　justify-content: center;

    　　align-items: center;

}

</style>

<script type="text/javascript">

　　function checkscroll() {　　

    　　　　console.info(window.scrollY)

　　}

</script>

大家可以将这段代码copy亲自测试一下，在有和没有overflow属性之间切换，就明白了。

因为很多同学在开发项目时，会有脚手架之类的文件进行快速开发，但是有的脚手架会在入口的html文件，设置overflow: scroll／auto。

这个属性在入口级别的文件中最好不要随意使用，造成的scroll滑动监听整体失效，你无论如何也不会想到是这个原因。

打个比方：

APP.vue

这是用vue.js写的页面，我在其中用了vux（一个基于vuejs的移动组件库）的一个组件view-box,当时我找遍了所有的文件，并没有那里

有over-flow 样式；但是scroll事件失效，window.scrollY一直为0， 最后我发现所有页面都是如此，于是我就定位在入口的几个文件，将

相关的引入组件也进行排查，终于在view-box,这个组建里找到了over-flow：auto；样式。注释掉后，就正常了

所以说：over-flow：auto；如果放在入口文件并且放在包裹的父元素上，一定要慎重！

2 vue上监听scroll事件

利用DOM二级监听事件即可，

window.addEventListener('scroll',()=>{console.log(window.scrollY)})

3 如果问为什么不能在vue组件上直接监听

一般来说根据我的测试情况，监听滚动基本上监听的都是整体document或者window。

监听的都是相对于整体（document或者window）的当前可见区域的文档片段（就是你眼睛可以看到的部分），而不是去监

听单个的DOM片段，因为这么做没有意义。在vue中也监听不了！因为vue的每个文件实际上都是一块DOM片段，你在自己

的身上监听自己的滑动情况。这就好比（你想揪着自己的头发，把自己提起来）！

当然，这是比较通俗一点，直观一点的解释，如果有更底层，更科学的解释，一起探讨！

onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法的更多相关文章

  1. Js 动态添加的数据,监听事件监听不到

    在开发中遇到这种问题,就是有些数据,比如按钮是动态添加进去的,结果添加事件监听无效,直接写死在页面上是可以的. 这就是很明显的加载先后顺序的问题了. 解决的方法: $(document).ready( ...

  2. vue.js 中如何解除绑定事件

    我们项目中有一个点赞需求,只允许点击一次赞,再次点击则取消赞, 为了防止用户多次连续点击,在点赞后需要解绑事件,成功调取API后,才可再次点击取消赞. 目前用的方法是加入一个flag控制点击事件可否点 ...

  3. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  4. [译]怎样在Vue.js中使用jquery插件

    原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使 ...

  5. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  6. vue.js 中 data, prop, computed, method，watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  7. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  8. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  9. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

随机推荐

  1. maven安装以及eclipse配置maven

    详细地址: http://jingyan.baidu.com/article/295430f136e8e00c7e0050b9.html 介绍安装maven,配置Maven环境变量,同时在Eclips ...

  2. JIRA Rest JAVA Client API实现问题管理及自定义字段（原创）

    JIRA是一个缺陷跟踪管理系统,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域,当我们需要把第三方业务系统集成进来时,可以调用他的API. JIRA本身的A ...

  3. 《Head First 设计模式》读书笔记

    目录 <Head First 设计模式>读书笔记 创建模式 结构模式 行为模式 用思维导图记录的读书笔记. <Head First 设计模式>读书笔记 模式的分类遵循<设 ...

  4. ANR触发原理（what triggers ANR?）

    Ref: http://developer.android.com/training/articles/perf-anr.html http://stackoverflow.com/questions ...

  5. Spring Security构建Rest服务-1202-Spring Security OAuth开发APP认证框架之重构3种登录方式

    SpringSecurityOAuth核心源码解析 蓝色表示接口,绿色表示类 1,TokenEndpoint 整个入口点,相当于一个controller,不同的授权模式获取token的地址都是 /oa ...

  6. thymeleaf的常见问题汇总

    thymeleaf的常见问题汇总 1.thymeleaf th:href 多个参数传递格式 th:href="@{/Controller/update(param1=1,param2=${p ...

  7. Tomcat性能调优-让小猫飞奔

    一.总结前一天的学习 从“第三天”的性能测试一节中,我们得知了决定性能测试的几个重要指标,它们是: ü   吞吐量 ü   Responsetime ü   Cpuload ü   MemoryUsa ...

  8. C/C++ -- Gui编程 -- Qt库的使用 -- 使用小写qDebug调试程序

    qDebug作为printf不需要头文件 qDebug()作为cout要使用头文件<QDebug> -----debug.cpp----- -----debug.cpp----- #inc ...

  9. Python -- Gui编程 -- Win32API的使用

    消息框 messageBox.py import win32api, win32con win32api.MessageBox(0, 'Hello World!', 'Come Here', win3 ...

  10. Google Guava--基础工具用法

    Optional 优雅的解决Null(java 8 提供了Optional类) Guava用Optional表示可能为null的T类型引用.一个Optional实例可能包含非null的引用(我们称之为 ...