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. HttpClient和HttpURLConnection的使用和区别（上）

    转自:点击打开链接 相信很多Android开发者碰到涉及到Http协议的需求时,都和我一样在犹豫是使用HttpClient还是使用HttpURLConnection呢.我在网上也搜索了很多文章,来分析 ...

  2. pods报错修复方法

    ### Error ``` RuntimeError - [!] Xcodeproj doesn't know about the following attributes {"inputF ...

  3. rabbitmq系列三 之发布/订阅

    1.发布/订阅 在上篇教程中,我们搭建了一个工作队列,每个任务只分发给一个工作者(worker).在本篇教程中,我们要做的跟之前完全不一样 —— 分发一个消息给多个消费者(consumers).这种模 ...

  4. 剑指offer四十二之和为S的两个数字

    一.题目 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 二.思路 数列满足递增,设两个头尾两个指针i和j,若ai + ...

  5. Android IntentFilter匹配规则

    一:显式调用  需要明确指定被启动对象的组件信息,一般是在相同的应用程序内部实现的 Intent intent = new Intent(); intent.setClass(SecondActivi ...

  6. java数据结构之(堆)栈

    (堆)栈概述栈是一种特殊的线性表,是操作受限的线性表栈的定义和特点•定义:限定仅在表尾进行插入或删除操作的线性表,表尾—栈顶,表头—栈底,不含元素的空表称空栈•特点:先进后出(FILO)或后进先出(L ...

  7. nginx添加多站点

    1.登陆服务器2.修改ngnix配置文件3.重启ngnix4.测试是否添加成功 修改/nginx/conf/nginx.confviminclude /alidata/server/nginx/con ...

  8. C语言中判断字符串str1是否以str2开始或结束

    #include <stdlib.h> #include <string.h> #include <stdio.h> /**判断str1是否以str2开头 * 如果 ...

  9. Smali 语法文档

    可以选择保存成pdf格式,查询起来挺方便的 if v0==0 go cond_0 if-eqz v0, :cond_0   if v0!=0 go cond_0 if-nez v0, :cond_0 ...

  10. lucene源码分析(3)facet实例

    简单的facet实例 public class SimpleFacetsExample { private final Directory indexDir = new RAMDirectory(); ...