Tag: iframe
All the articles with the tag "iframe".
使用 Vue 監聽 iframe 的滾動事件
Posted on:2023/02/23 15:17:00Vue專案中嵌入 iframe,需要監聽滾動事件實現需求。文章分享了使用原生 JS 監聽 iframe 滾動事件的方法,透過ref取得DOM元素,使用 contentDocument 獲取 iframe 的 DOM 元素,再透過 addEventListener 監聽 scroll 事件。判斷是否滾動到底部的機制以 iframe 的高度、滾動高度、可視高度為參考,並在 Vue 組件中實現相應邏輯。針對一些可能遇到的問題,如部分 iframe 未監聽到滾動事件、Android 取不到 iframe 的相關屬性、特定瀏覽器滾動到底部未觸發事件,提供了解決方案。加強滾動事件的穩定監聽,確保按鈕在滾動到底部時正確觸發,提升用戶體驗。