vue中关于子路由页面滚动或resize监听
首先介绍项目结构:
我的项目结构是三部分,左侧菜单栏sider,顶部导航栏header,以及主体部分content,加一个小底部。主体部分根据菜单栏切换路由展示页面。其中sider和content部分使用了ele中的滚动条
需求:
监听content中的滚动事件,实现超过距离展示totop标识,点击可以滚动至顶部
要点1:监听滚动事件
一般滚动事件监听需要在挂载后mounted()中采用window.addEventListener('scroll',yourFunctionName),但是滚动部分存在于content部分,相当于只是页面的一个元素,而addEventListener有三个参数,第一个是事件触发方式,第二个是你需要完成的操作函数,第三个事useCapture指定事件是否在捕获或冒泡阶段执行。因此此处监听只有在添加第三个参数为true后才能成功对content内部滚动进行监听。
要点2:监听屏幕内部元素滚动
document.getElementById(id).getBoundingClientRect().top
即为当前你要监听的元素距离屏幕顶部的距离
将元素滚动至屏幕视野范围内:
document.getElementById(id).scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'})
scrollIntoView有三个参数,可以实现动画效果
要点3:销毁window挂载的监听事件
在单页面中对window事件进行监听后,点击其他页面后此监听会报错。因此需要在离开当前监听页面时对监听进行销毁
同样的,与挂载相同,如果对window.addEventListener指定事件执行方式,在取消监听时同样需要这个参数。
即在destroyed()中使用window.addEventListener('resize',yourFunctionName)对应window.removeEventListener('resize',yourFunctionName)
window.addEventListener('scroll',yourFunctionName,true)对应window.removeEventListener('scroll',yourFunctionName,true)