scroll事件,scroll事件设置
$(selector).scroll(function) scroll 事件的用法？
定义和用法：当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
scroll() 函数触发 scroll 事件。或者如果设置了 function 函数，则规定当发生 scroll
事件时执行的代码。
语法：$(selector).scroll(function)
参数：function
描述：可选。规定当用户滚动指定的元素时，要运行的函数。
如果未设置该参数，则 scroll() 函数触发 scroll 事件。
在vb中，滚动条的scroll 事件和change 事件的区别，怎样会触发？这两个老是分不清！
scroll和change的区别为：指代不同、用法不同、侧重点不同
一、指代不同
1、scroll：滚屏，滚动。
2、change：变更，变革。
二、用法不同
1、scroll：过去式，scrolled，过去分词，scrolled，现在分词，scrolling，第三人称单数，scrolls。基本意思是使事物变得与以往不同，指事物发生了本质的变化或指一事物取代了另一事物。
2、change：change可用作不及物动词，也可用作及物动词。用作及物动词时，接名词或代词作宾语，可用于被动结构，用作不及物动词时，可表示“改变，换衣，换车”。
三、侧重点不同
1、scroll：侧重于在当前区域内操作。
2、change：侧重于在当前区域外操作。
Change事件与Scroll事件有何区别
Scroll事件发生在滚动条移动的过程中，而Change事件发生在滚动条的value属性发生改变的时候，比如当你用鼠标拖动滚动条移动的时候，这时发生的是scroll事件，当你松开鼠标键后，这是发生的则是change事件。另外，如果滚动条的值不是用鼠标改变的，而是用程序直接改变的，是不会触发Scroll事件的，只有change事件
scroll和wheel事件
1 .scroll事件在滚动条滚动时被触发
2 . scroll检测的是滚动条的滚动，当滚动条不能滚动（到顶或到底）时，scroll便不再触发
3 .默认滚动不能禁止
4 .scroll事件可以被高频率的触发,事件处理程序不应该执行高性能消耗的操作,推荐的做法是scroll里面的操作使用requestAniamtionFrame()操作
5 .感觉animateJS应该做了这个优化吧
1 .wheel在鼠标滚轮滚动的时候被触发,由于鼠标滚轮时大部分都会触发scroll事件,所以wheel事件先触发
2 .一旦滚动条到底部的时候,滑动鼠标滚轮继续滚动,wheel还是会一直触发,而scroll这时不会触发
3 .可以禁止滚轮滚动
4 .不要将 wheel 事件与[ scroll ]事件混淆。事件的默认操作 wheel 是特定于实现的，不一定调度 scroll 事件。即使是这样，事件 delta* 中的值 wheel 也不一定反映内容的滚动方向。因此，不要依赖 wheel 事件的 delta* 属性来获取滚动方向。相反，检测事件[ scrollLeft ]中[ scrollTop ]目标的值变化。 scroll
5 .中间滚轮按下去的时候.也可以滚动,但是不会触发scroll事件
6 .better-scroll的处理操作,真正和滚动有关的只有wheel事件,没有监听scroll事件.而且他这种操作是会屏蔽中键按下触发滚动的.这种操作不知道屏蔽之后可不可以
7 .mouseWheel是非标准事件,已经被这个事件代替
8 .属性
9 .据滚轮方向（即该事件的各delta属性值）来推断文档内容的滚动方向，因标准未定义滚轮事件具体会引发什么样的行为，引发的行为实际上是各浏览器自行定义的。即便滚轮事件引发了文档内容的滚动行为，也不表示滚轮方向和文档内容的滚动方向一定相同。因而通过该滚轮事件获知文档内容滚动方向的方法并不可靠。需要检查元素的scroll值判断才知道是朝什么方向滚动
10 .他的滚动完全就是用whell自己做
11 .属性
1 .scroll,wheel,mousewheel,DOMMouseScroll
2 .兼容性
[图片上传失败...(image-d0be31-1647574199505)]
1 .需要ref拿到dom操作,这里被普通的接管了,普通的是可以通过e.preventDefaault()阻止了默认的滚动,但是鼠标中间键按下触发的滚动,是无法阻止的,并且不会触发wheel事件,那这里就不行了,所以还是不能用wheel来做这个
2 .
监听scroll事件
监听scroll事件
scroll事件没有冒泡阶段，因此 监听scroll事件需要在捕获阶段进行。
1.用法一：
document.getElementById("testScroll").addEventListener("scroll",() ={
console.log("scroll ...");
},true);
2.用法二：
scrollFn () {
console.log("scrollFn...");
}
使用@scroll 或者@scroll.native时，滚动事件都无法监听。使用?@scroll.capture才可以监听滚动事件
事件使用：
在项目中遇见需要在当回到0时变换css 需要监听scroll 的（亲测可用）