vue监听指定区域的滚动，以及设置滚动值

这个方法适用于顶部固定这种不是全页面在滚动的情况，只需要监听指定的位置滚动就能触发想要的效果。

主要就是用到ref和@scroll

ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素

@scroll可以监听滚动事件

因为我绑定名字是Box，所以就用这个this.$refs.Box来指定dom进行 *** 作，这里我让他滚回到了顶部。

希望对你有所帮助！

随着三大框架(vue,react,angular)的流行,导致前端开发者越来越少的接触dom *** 作,慢慢忘了有些需求dom才是最优解.

需求:子组件滚动时执行对应函数

如果直接在子组件mounted里addEventListener,

只能监听到父组件的滚动,子组件监听不到

解决方案

查看addEventListener的文档得知:

1. 子组件mounted里addEventListener的时候,第三参数要设置为true,因为子组件滚动是捕获事件,父组件滚动是冒泡事件,addEventListener第三参数默认false只监听冒泡事件,所以子组件的捕获事件默认监听不到,改为true才可以.

2.这时候子组件和父组件的滚动都能触发事件,区别前者是捕获后者是冒泡,通过查阅event的文档得知,冒泡事件event.bubbles值是true,捕获事件的值是false.所以通过addEventListener的回调函数判断event的bubbles值即可区分是父组件滚动还是子组件滚动.

回调函数:

3.记得销毁组件的时候移除监听事件

HTML 所监听的事件我们的vue都已经加入了监听

HTML 事件参考手册

下面我们来介绍几个比较常用的事件

1、onclick 元素上发生鼠标点击时触发。 ==> vue用法 @click（）

2、onscroll 当元素滚动条被滚动时运行的脚本。 ==> vue用法 @scroll（）

可以用来监听元素是否滚动到底，如下：

3、ondblclick 元素上发生鼠标双击时触发。 ==> vue用法 @dblclick（）

4、onmousedown 当元素上按下鼠标按钮时触发。。 ==> vue用法 @mousedown（）

下面是一个元素拖动的例子：

5、onkeydown 在用户按下按键时触发。 ==> vue用法 @keydown（）

6、onkeypress 在用户敲击按钮时触发。 ==> vue用法 @keypress（）

7、onkeyup 当用户释放按键时触发。 ==> vue用法 @keyup（）

具体可以参考文档 HTML 事件参考手册

跟踪触摸的属性

每个Touch对象包含的属性如下。

---