Loading... ## 盒子绑定滚动事件 ```vue @scroll="infiniteScroll" ``` ## 事件处理 - 左右滚动 ```js // 滚动到最后自动加载 const infiniteScroll = (e) => { const { scrollLeft, clientWidth, scrollWidth } = e.target if ( scrollLeft === 0 ) { alert('滚动到最左啦') } if ( scrollLeft + clientWidth === scrollWidth ){ alert('滚动到最右啦') } } ``` - 上下滚动 ```js // 滚动到最后自动加载 const infiniteScroll = (e) => { const { scrollTop, clientHeight, scrollHeight } = e.target if ( scrollTop === 0 ) { alert('滚动到最上啦') } if ( scrollTop + clientHeight === scrollHeight ){ alert('滚动到最下啦') } } ``` ## 平滑滚动 scroll-behavior 有两个属性值，默认 auto - auto:滚动框立即滚动 - smooth:实现平稳的滚动 ```css scroll-behavior: smooth; ``` 最后修改：2022 年 12 月 07 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏