vueでスクロールイベントをリスニングする方法
HTMLコード
//
jsコード
scrollEvent () {
console.log(this.$refs.scrollDiv.scrollTop);
// console.log(1234);
},
window.addEventListener("scroll", function(){ console.log('scrolling'); });
はページ全体のスクロールであり、スクロールバーはページ全体に基づいており、ローカルスクロールはオーバーフローした要素の親要素に基づいているため、この親要素は固定高さ100 pxなど(サブ要素がオーバーフローし、親要素がスクロールバーを生成するようにする)が好ましく、@scroll=「scrollEvent」を直接使用してthis.$refs.scrollDiv.scrollTopはスクロール高さを取ります. mounted: function () {
window.addEventListener('scroll', this.handleScroll, false); // ( )
},
methods: {
handleScroll: function () {
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
// /
let scrollObj = document.getElementById(div); //
let scrollTop = scrollObj.scrollTop; // div
let scrollHeight = scrollObj.scrollHeight; //
//
if(scrollTop+clientHeight == scrollHeight){
// div + =
}
}
},
destroyed: function () {
window.removeEventListener('scroll', this.handleScroll); // ( )
}
}