老师,能解释一下滚动条组件里的各种方法实现滚动的逻辑吗?
来源:5-12 目录功能实现(多级目录功能)
码代码
2019-11-26
写回答
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 组件的高度,因为某些场景下滚动条组件需要有一个固定的高度,比如页面有头部和底部,那么滚动条就是中间部分,如果我们不能精确计算出滚动条的高度,那么滚动条将无法生效,所以创建了这样一个方法
012020-06-09
相似问题