如何推广自己的个人网站呢,企业网站是如何做的,中企动力销售怎么样,做购物网站小图标文章目录 前文提要滚动条滚动事件 scroll鼠标滚动事件 wheel二者不同点 前文提要
本人仅做个人学习记录#xff0c;如有错误#xff0c;请多包涵 滚动条滚动事件 scroll
scroll事件绑定html页面中的指定滚动条#xff0c;无论你拖拽滚动条#xff0c;选中滚动条之后按键盘… 文章目录 前文提要滚动条滚动事件 scroll鼠标滚动事件 wheel二者不同点 前文提要
本人仅做个人学习记录如有错误请多包涵 滚动条滚动事件 scroll
scroll事件绑定html页面中的指定滚动条无论你拖拽滚动条选中滚动条之后按键盘上下、pg up或pg dn、还是滚动鼠标滚轮都能触发这个事件。 html示例代码如下
bodydiv idboxul scroolf classlistli1/lili2/lili3/lili4/li/ul/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,methods: {f(){console.log(触发了)}}})/script
/bodycss代码如下
style.list{height:500px;width:200px;overflow: auto;background-color: orange;}li{height:200px;width:180px;background-color: white;}
/style参考链接overflow 当内容溢出的时候overflow: auto;会提供滚动条 和开头描述的一样只要滚动条向指定方向还有移动的空间无论什么方式使得滚动条滚动都能触发scroll事件从而使得控制台输出’触发了’。
鼠标滚动事件 wheel
wheel事件绑定的是鼠标滚轮而不是html页面内容中的滚动条 将上文html中的部分代码修改其余不变
ul wheelf classlistli1/lili2/lili3/lili4/li
/ul将绑定的事件从滚动条滚动换位鼠标滚轮滚动。 呈现效果如下 当使用鼠标滚轮上下滑动的时候会鼠标滚轮事件触发从而在控制台输出’触发了’。
二者不同点
但是和scroll事件不同的是当滚动条朝指定方向无法滚动但是你使用鼠标滚轮朝着指定方向接着滚动纵然滚动条不变化控制台依旧会输出也就是鼠标滚轮事件依旧被触发了。
例如图中当滚动条向上无法接着滚动使用鼠标滚轮向上滚动依旧触发鼠标滚轮事件在控制台输出’触发了’
但是上文提到的scroll事件则不会像这样被触发。 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
