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. Python小白学习之路（七）—【字典】【字典的功能】【布尔值】

    字典(dict) 基本结构: d = {key1 : value1, key2 : value2 } dict = {'} key : value称为字典的键值对. 每个键 key和值value 之间 ...

  2. 在vue项目中安装使用Mint-UI

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性:       使用文档: http://mint-ui.github.io/#!/zh-cn Mi ...

  3. Linux必备命令

      目录                                                              概述 常用系统工作命令 系统状态检测命令 工作目录切换命令 文本文件 ...

  4. 用postman做接口测试实例

    使用postman做接口测试,可以选择请求方式,可以直接输入参数和header,可以编写测试结果的代码,判断是否通过测试 下图为填写接口测试地址.填写接口的参数,点击send发送请求 其中,Param ...

  5. 剑指offer四十七之求1+2+3+...+n

    一.题目 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 二.思路 1.需利用逻辑与的短路特性实现递归终 ...

  6. 软件魔方制作系统启动盘并安装win10系统

    不多说,直接上干货!  推荐软件:软件魔方 http://mofang.ruanmei.com/ 这里,我想说的是,这个软件来制作系统盘,是真的方便和好处多多.具体我不多说,本人也是用过其他的如大白菜 ...

  7. css自动适应宽度

    .itemContent { background-color:#F0F0F0; padding:3px 11px 11px 11px; text-align:justify; text-justif ...

  8. Chapter 3 Phenomenon——18

    My intuition flickered; the doctor was in on it. 我的直觉告诉我:这个医生也参与了. 我灵光一闪:这医生熟悉内情. "I'm afraid t ...

  9. Web服务端性能提升实践

    随着互联网的不断发展,日常生活中越来越多的需求通过网络来实现,从衣食住行到金融教育,从口袋到身份,人们无时无刻不依赖着网络,而且越来越多的人通过网络来完成自己的需求. 作为直接面对来自客户请求的Web ...

  10. mysql RC下不存在则插入

    mysql版本:5.7 目的:在RC下,name列上仅有key索引,并发插入name时不出现重复数据 RC不加gap lock,并且复合select语句是不加锁的快照读,导致两个事务同时进行都可插入, ...