vue滚动条事件（获取滚动条距离底部距离）

网上大部分vue的滚动条操作是监听dom实现，我是用@scroll实现

首先有滚动条的div一定要设固定高度，然后overflow:auto;出现滚动条

passive是使滚动更加流畅，减少卡顿

<div @scroll.passive="getScroll($event)" style="height:100px;overflow:auto;"><ul><li>内容</li></ul></div>

然后在方法中获取到滚动条距离底部距离

getScroll(event) {// 滚动条距离底部的距离scrollBottomlet scrollBottom =event.target.scrollHeight -event.target.scrollTop -event.target.clientHeight;// if (this.finished && scrollBottom < 40) {//  操作// }},

　好了，现在就获取到滚动条距离底部的距离了，可以用来做上拉加载操作或其他操作了

有什么bug欢迎各位留言！！谢谢

vue滚动条事件（获取滚动条距离底部距离）相关推荐

JS 监听滚动条事件
JS 监听滚动条事件获取滚动条位置代码监听滚动条方法效果获取滚动条位置代码 /** * 获取滚动条位置 */ function getScrollTop() {var scrollPos;if ...
js,jq获取滚动条高度及浏览器宽高
***获取滚动条高度*** // 获取滚动条高度 console.log(window.scrollY); console.log(window.pageYOffset); console.log ...
获取滚动条距离底部的高度
今天写移动端遇到了需求要获取滚动条距离底部的高度 var wHeight = $(document).height();var scrollHeight = wHeight - $(document) ...
js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
js获取滚动条距离浏览器顶部,底部的高度
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
如何使用jquery获取 (滚动条)距离(页面底部)的距离
为什么80%的码农都做不了架构师?>>> if($(document).height()-$(document).scrollTop()<1200){ //当整个页面do ...
前端：计算滚动条距底部多远（距离底部的百分比）
// 获取某固定元素滚动的高度 const scrollHeight = document.getElementById('mobileRenderContent').scrollHeight;// ...
利用js获取滚动条滚动距离，实现图片固定在屏幕的某个位置
利用js获取滚动条滚动距离,实现图片固定在屏幕的某个位置思路: 1.获取对象距离顶部和左侧的距离: 2.获取元素对象: 3.当滚动条滚动时获取滚动条滚动的距离: 4.滚动条滚动时执行函数:对象距离顶 ...
dom元素滚动条高度 js_js,jquery 获取滚动条高度和位置, 元素距顶部距离
一,获取滚动条高度和位置 jQuery 获取览器显示区域的高度: $(window).height(); 获取浏览器显示区域的宽度:$(window).width(); 获取页面的文档高度:$(doc ...

vue滚动条事件（获取滚动条距离底部距离）

vue滚动条事件（获取滚动条距离底部距离）相关推荐

最新文章

热门文章