Vue Mobileカスタム・ドロップダウン更新イベント＋アンチシェイク

/**
 * 手ブレ防止機能
 */
export function debounce(fn, delay) {
 // 最後のディレイヤーを記録する
 var timer = null;
 var delay = delay || 200;
 return function () {
 var args = arguments;
 var that = this;
 // 最後のディレイヤーをクリアする
 clearTimeout(timer)
 timer = setTimeout(function () {
 fn.apply(that, args)
 }, delay);
 }
}
/**
 * @desc ドロップダウン更新
 * @param {string} el
 * @param {function} callback
 * @param {number} bottomheight
 *
 */
export const DropDownRefresh = (el, callback, bottomheight = 20) => {
 let ele = document.querySelector(el)
 function getScrollTop() {
 let scrollTop = ele.scrollTop;
 return scrollTop;
 }
 //視覚的範囲の高さを取得する
 function getClientHeight() {
 var clientHeight = ele.clientHeight;
 return clientHeight;
 }
 //ドキュメントの高さを取得する
 function getScrollHeight() {
 var eleHeight = ele.scrollHeight;
 return eleHeight;
 }
 ele.onscroll = debounce(() => {
 getScrollTop();
 getClientHeight();
 getScrollHeight();
 if (getScrollTop() + getClientHeight() > getScrollHeight() - bottomheight ) {
 callback()
 }
 }, 300)
}

呼び出す

created() {
	//マウント・イベント
 this.$on("hook:mounted", () => {
 untils.DropDownRefresh(".content", () => {
 console.log('リフレッシュ')
 });
 });
 //破棄イベント
 this.$on("hook:destroyed", () => {
 document.querySelector(".content").onscroll = null;
 });
 }