onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
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事件监听的方法的更多相关文章
- Js 动态添加的数据,监听事件监听不到
在开发中遇到这种问题,就是有些数据,比如按钮是动态添加进去的,结果添加事件监听无效,直接写死在页面上是可以的. 这就是很明显的加载先后顺序的问题了. 解决的方法: $(document).ready( ...
- vue.js 中如何解除绑定事件
我们项目中有一个点赞需求,只允许点击一次赞,再次点击则取消赞, 为了防止用户多次连续点击,在点赞后需要解绑事件,成功调取API后,才可再次点击取消赞. 目前用的方法是加入一个flag控制点击事件可否点 ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- [译]怎样在Vue.js中使用jquery插件
原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使 ...
- vue.js中，input和textarea上的v-model指令到底做了什么？
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- vue项目中实现图片懒加载的方法
对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
随机推荐
- vue项目打包后路径出错
安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...
- 【jxoi2018】游戏 组合数学
首先令$n=r-l+1$. 令$k$表示区间$[l,r]$中存在多少个数$x$,使得$x$不存在小于$x$且在区间$[l,r]$中的因数,我们把包含这些数的数集称为$S$ 我们来先想一个$O(nk)$ ...
- AngularJS自定义Directive
(编辑完这篇之后,发现本篇内容应该属于AngularJS的进阶,内容有点多,有几个例子偷懒直接用了官方的Demo稍加了一些注释,敬请见谅). 前面一篇介绍了各种常用的AngularJS内建的Direc ...
- 服务器集群的session管理
应用服务器的高可用架构设计主要基于服务无状态这一特性,但是事实上,业务总是有状态的,单机情况下,Session可由部署在服务器上的web容器(如Jboss)管理.在使用负载均衡的集群环境中,由于负载均 ...
- vim实践学习
http://coolshell.cn/articles/5426.html http://www.lagou.com/jobs/138351.html awk:http://coolshell.cn ...
- 使用openssh-clients的scp命令来传输文件
了解openssh-client是请参阅:https://blog.csdn.net/u010215256/article/details/53239905 了解scp命令来传输文件请参阅:https ...
- 线性表 （单链表、循环链表-python实现）
一.线性表 线性表的定义: 线性表是具有相同数据类型的有限数据的序列. 线性表的特点: 出了第一个元素外,每个元素有且仅有一个直接前驱,除最后一个元素外有且只有一个后继. 线性表是一种逻辑结构,表示元 ...
- django第四课 标签的用法(if/else、for、ifequal、过滤器、注释等)
if/else {% if %} <p>内容</P> {% endif %} {% else %}是可选标签 {% if %} <p>内容</P> {% ...
- 视口（viewport）原理详解之第二部分（移动端浏览器）
一.移动端浏览器的问题 当我们把移动端浏览器和桌面浏览器比较时,最明显的差异就是尺寸.移动端浏览器尺寸要比桌面屏幕小得多,移动浏览器最多差不多也就400px.最重要的问题集中在我们的CSS上,特别是v ...
- Windows下PATH等环境变量详解
在学习JAVA的过程中,涉及到多个环境变量(environment variable)的概念,如PATH.正确地配置这些环境变量,是能够顺利学习.开发的前提.而经常出现的问题是:有的学习者能够按照提示 ...