老师,能解释一下滚动条组件里的各种方法实现滚动的逻辑吗?

来源:5-12 目录功能实现(多级目录功能)

码代码

2019-11-26

http://img1.sycdn.imooc.com/szimg/5ddc883109e738ea07400119.jpg

http://img1.sycdn.imooc.com/szimg/5ddc8831098148b508070321.jpg


写回答

1回答

Sam

2019-11-26

好的,下面逐一分析:

1、handleScroll:该方法的用途是获取 Y 轴的偏移量,然后交给父组件的 onScroll 事件进行处理,获取 offsetY 时用了三种方法进行获取,在 Chrome 中 e.target.scrollTop 就可以获取到了,但在某些浏览器中可能存在兼容性问题;

2、scrollTo 是调用了 div 的 scrollTo 方法,这是 DOM 的一个 API,用途是将页面滚动到指定的位置;

3、refresh 方法是根据 top 和 bottom 属性,动态计算出 scroll 组件的高度,因为某些场景下滚动条组件需要有一个固定的高度,比如页面有头部和底部,那么滚动条就是中间部分,如果我们不能精确计算出滚动条的高度,那么滚动条将无法生效,所以创建了这样一个方法

0
1
慕斯6088333
请问一下这里的父组件是我们使用这个component的组件还是什么。
2020-06-09
共1条回复

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构,完整项目流程

1610 学习 · 1951 问题

查看课程