vue滚动条滚动事件,vue监听滚动scroll
本文主要介绍了Vue的滚动事件触发方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
滚动事件触发示例监听滚动事件无效。
Scroll滚动事件触发
记住，当你需要滚动事件触发器时，千万不要添加overflow-y:auto；一旦加了，都是零。
例子
去掉溢出-y:auto；
如果您需要将此页面作为子组件引入，您需要添加true，因为.请看最后一张图片。如果不加true，就不会成为捕获事件，所以无法成功引用。
模板
div class=totop
div class= BTN top v-if= BTN flag @ click= backTop()
van-icon name= arrow-up size= 40 color= # cf 9 b 6 b class= imga /
/div
/div
/模板
脚本
导出默认值{
名称： totop ，
data() {
返回{
btnFlag:假，
};
},
//使用VUE编写一个在控制台上打印当前scrollTop的scrolltop。首先，在挂接的窗口中添加一个滚动监听事件。
已安装(){
window . addevent listener( scroll ，this.scrollToTop，true)；
//如果需要将此页面作为子组件引入，则需要添加true，因为.请看最后一张图片。
},
销毁(){
window . removeeventlistener( scroll ，this.scrollToTop，true)；
},
方法：{
//点击图片返回top方法，并添加定时器使过渡平滑。
backTop() {
让那个=这个；
设timer=setInterval(()={
设is peed=math . floor(-that . scroll top/5)；
document . document element . scroll top=document . body . scroll top=
那. scrollTop是速度；
if (that.scrollTop===0) {
clearInterval(定时器)；
}
}, 16);
},
//监视“返回顶部”按钮和浏览器顶部之间的距离。如果滚动距离大于浏览器高度，则将btnFlag设置为true，否则为false。
scrollToTop() {
让那个=这个；
let scroll top=window . page yo offset document . document element . scroll top document . body . scroll top；
that . scroll top=scroll top；
console.log(scrollTop)
//为了从顶部计算高度，当高度大于50时会显示顶部图标，小于50时隐藏。
if (that.scrollTop 50) {
that . BTN flag=true；
}否则{
that . BTN flag=false；
}
},
},
};
/脚本
style lang=scss 范围。totop {
位置：固定；
右：40px
底部：60px
宽度：50px
高度：50px
填充：10px
光标：指针；
}。imga {
位置：相对；
top:-20px；
左：15px
文本对齐：居中；
行高：50px
边框：3px实心# cf 9 b 6 b；
宽度：50px
高度：50px
边界半径：50%；
}
/风格
监听Scroll事件无效
1.设置要监控的dom元素的高度，子元素的内容要超过容器的高度。
2.设置溢出为：自动/滚动，默认值可见，不可触发。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。