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. WPF一步步开发XMPP IM客户端1：入门

    [起因&目标] 因为工作原因接触openfire服务端和spark客户端开发,主要是基于openfire扩展开发了针对企业用途的服务器插件,还开发了各个平台上的客户端(Windows\mac\ ...

  2. .NET 如何隐藏Console Application的窗口

    1)创建Console Application工程 2)修改Output type 为Windows Application即可

  3. Java之IO(八)PipedIutputStream和PipedOutputStream

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7056278.html 1.前言 本章介绍Java的IO体系中最后一对字节流--管道流.之前在字节数组流的时候就说 ...

  4. 部署nexus服务

    一.安装和启动 官网下载nexus-2.12安装包,地址:https://sonatype-download.global.ssl.fastly.net/nexus/oss/nexus-2.12.0- ...

  5. log4j:WARN No appenders could be found for logger (org.apache.hadoop.metrics2.lib.MutableMetricsFactory). log4j:WARN Please initialize the log4j system properly. log4j:WARN See http://logging.apache.o

    上面的报错是在本地java调试(windows) hadoop集群 出现的 解决方案: 在resources文件夹下面创建一个文件log4j.properties(这个其实hadoop安装目录下的 e ...

  6. ASP.NET 负载均衡 StateServer Session共享问题（经验记录）

    (源地址:http://www.cnblogs.com/ryhan/p/3748976.html) 最近在改造公司的一个系统 支持F5硬件负载,由于系统后面还跟了个异步工具,需要将Admin上传的文件 ...

  7. Mina的客户端

    (一) package client; import java.net.InetSocketAddress; import java.nio.charset.Charset; import org.a ...

  8. Python -- Gui编程 -- Tkinter的使用 -- 对话框消息框

    1.消息框 tkMessageBox.py import tkinter from tkinter import messagebox def cmd(): global n global butto ...

  9. android 解决studio生成aar包并在其他工程引用aar包的坑，不需要任何gradle配置

    1.首先我们创建一个module 2.编写我们的一个类 3.编译我们的module,生成release版本的aar,注意千万不要是debug版本的, 点击最右边的gradle面板,选择我们的modul ...

  10. java.lang.NoSuchMethodError: org.json.JSONArray.iterator()Ljava/util/Iterator 阿里云短信

    请尝试使用 <dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk ...