vue中的isscroll屬性用于判斷當前元素是否可以滾動。這個屬性比較常用,大多數情況下我們最常見的使用場景就是判斷當前的列表是否滾動到了底部。
mounted() { this.$refs['scroll'].addEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { const isTop = this.$refs['scroll'].scrollTop === 0; // 是否在頂部 const isBottom = this.$refs['scroll'].scrollTop + this.$refs['scroll'].clientHeight === this.$refs['scroll'].scrollHeight; // 是否在底部 if (isBottom) { console.log('觸底了'); } } }
上述代碼中,我們通過addEventListener監聽scroll事件,并在方法handleScroll中通過scrollTop、clientHeight以及scrollHeight屬性計算出當前元素是否滾動到了底部。
需要注意的是,只有當前元素的overflow屬性為scroll或者auto時,才能被滾動。如果元素本身的高度不夠,也是無法滾動的。
除了判斷是否在底部,isscroll屬性還常用于判斷分頁加載的情況。當用戶滑動到底部時,觸發分頁加載的操作。這是一個比較典型的使用場景。
總之,isscroll屬性是非常實用的一個屬性,可以滿足我們很多關于滾動的需求。
下一篇docker內堆棧溢出