首先介绍项目结构:
我的项目结构是三部分,左侧菜单栏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'})