笔者根据业务场景实现一个鼠标滚动级联导航到指定楼层,用JavaScript实现,大家可以把他封装成vue组件在项目中可以复用,如大家有更好的实现欢迎多多交流。
github地址: demo
![](https://img.haomeiwen.com/i19729771/f45feb38c21100d8.png)
![](https://img.haomeiwen.com/i19729771/9261d1407e5619b5.png)
Ps:用到的技术点
1、在mounted里监听滚动事件
window.addEventListener('scroll', this.navScroll,true);
2、获取滚动条的位置
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
3、滚动到指定dom位置
floor[index].scrollIntoView(true)
Ps:具体实现
1、dom结构
![](https://img.haomeiwen.com/i19729771/c1f67e6daf308f98.png)
2、data里声明
![](https://img.haomeiwen.com/i19729771/54b4ed33d1465c88.png)
3、设置滚动scroll监听
![](https://img.haomeiwen.com/i19729771/7699eacbe06a2414.png)
4、监听触发函数
![](https://img.haomeiwen.com/i19729771/a0b0b70bf38b35f9.png)
4、导航点击事件触发函数
![](https://img.haomeiwen.com/i19729771/96f2bdd090c090a9.png)
网友评论