vue监听滚动条滚动事件(vue监听滚动到底部)

vue监听滚动条页面滚动动画。以页面底部的“返回顶部”功能为例。实现滚动动画的思路是，点击按钮时获取当前滚动条位置，调用定时器函数，每隔一个时间间隔滚动滚动条。条形的位置逐渐减小，直到达到0。清除计时器以返回到页面顶部。

当滚动条没有离开主页一屏高度时，“返回顶部”按钮应设置为不可见。您可以监视当前滚动条的位置。当小于一屏幕高度时，将按钮的v-show属性设置为false。如果大于设置屏幕高度时，设置为true。

代码示例

模板divid='index'divclass='toTop'v-show='showTop'@click='toTop'imgsrc='./assets/img/angle-square-up.png'alt=''宽度='35px'//div/div/templatescriptexport默认{data(){return{showTop:false,};},Mounted(){//添加监听事件window.addEventListener('scroll',this.scrolling);},methods:{//监听事件scrolling(){letcurrent=document.documentElement.scrollTop||文档.body.scrollTop;让vh=window.innerHeight;if(current=vh){this.showTop=true;}else{this.showTop=false;}},//点击事件toTop(){//获取当前滚动条位置lettop=document.documentElement.scrollTop||文档.body.scrollTop;//滚动动画consttimeTop=setInterval((()={document.body.scrollTop=document.documentElement.scrollTop=top-=50;if(top=0){clearInterval(timeTop);}},10);},},};/scriptstylelang='scss'scoped#index{.toTop{位置：固定；right:20px;Bottom:20px;光标：指针；width:35px;height:35px;z-index:2;opacity:0.3;}}img:hover{不透明度：0.5;}/样式

获取滚动条当前位置

document.documentElement.scrollTop||文档.body.scrollTop

获取屏幕高度

window.innerHeight

了解了这个原理之后，顶部导航栏的实现就非常简单了。如果不想写滚动动画，在a标签的href属性中填入目标跳转位置元素的id，直接跳转就很方便了。

导航栏如图

代码示例

templatedivid='navigation'ulclass='part1'liLOGO/li/ululclass='part2'!--href='/'跳转到首页--liahref='/'HOME/a/li!--href='/#about'跳转到首页id为about的元素位置--liahref='/#about'ABOUT/a/liliahref='/#paper'PAPER/a/liliahref='/#team'TEAM/a/li/ul/div/templatestylelang='scss'scoped#navigation{width:94vw;高度：60px；margin:0自动；//灵活布局display:flex;justify-content:之间的空格；对齐items:中心；part2{//灵活布局display:flex;justify-content:中心；对齐items:中心；}li{width:100px;高度：40px；行高：40px；字体粗细：粗体；a:link{color:#8e9eab;}a:visited{color:#8e9eab;}a:hover{color:#4f4f4f;}a:active{color:#4f4f4f;}}}/风格

题外话，如何优雅地修改a标签的默认样式呢？

主要设置a:linka:visiteda:hovera:active这些css属性

修复前

修改后

附代码

a{//清除默认下划线文字-decoration:none;}//初始超链接样式a:link{color:#8e9eab;}//超链接被访问后的样式a:visited{color:#8e9eab;}//鼠标悬停时的样式a:hover{color:#4f4f4f;}//点击超链接时的样式a:active{color:#8e9eab;}

附：

a:hover必须位于a:link和a:visited之后

a:active必须位于a:hover之后