監聽滾動,上下翻頁
1、重點公式
el.scrollTop + el.clientHeight === el.scrollHeight
2、示例程式碼
let curentPage = 1;
let totalPage = 10;
pdfScroll(event) {
let el = event.target;
if (el.scrollTop === 0) {
// 載入上一頁
if (currentPage > 1) {
currentPage--;
// scrollTop不設定為0,是為了可以繼續向上滾動
el.scrollTop = 6;
}
return;
}
if (el.scrollTop + el.clientHeight === el.scrollHeight) {
// 載入下一頁
if (currentPage < totalPage) {
currentPage++;
// scrollTop不設定為0,是為了可以繼續向上滾動
el.scrollTop = 6;
}
}
}
相關文章
- vue 監聽頁面滾動事件Vue事件
- angular 監聽 Windows 滾動事件 實現頁面滾動載入AngularWindows事件
- 監聽div滾動高度
- Flutter 滾動監聽及實戰appBar滾動漸變FlutterAPP
- vue監聽頁面中的某個div的滾動事件,並判斷滾動的位置Vue事件
- Flutter 滾動控制元件篇-->滾動監聽及控制(ScrollController)Flutter控制元件Controller
- vue指令做滾動載入 監聽等Vue
- 實現報表滾動到底部翻頁效果
- 滑鼠滑輪上下滾動設定方法_怎樣設定滑鼠上下滾動
- 滑鼠懸浮背景上下翻滾切換導航
- localeStorage 當前標籤頁變化監聽不到,只能監聽不同標籤頁變化,自己寫方法監聽
- vue 數字上下滾動抽獎Vue
- jQuery滑動方式上下左右滾動效果jQuery
- 如何實現報表滾動到底部進行翻頁的效果
- 一個有上下滾動效果的TextViewTextView
- table上下對齊滾動條設定
- 如何監聽頁面關閉或重新整理動作
- js如何監聽頁面縮放?JS
- linux vi編輯器中 快捷鍵上下翻頁Linux
- Flutter SingleChildScrollView 滾動頁面FlutterView
- 頁面圖片自動滾動
- 筆記本win10系統瀏覽網頁時滑鼠自動上下滾動如何解決筆記Win10網頁
- 線上直播系統原始碼,實現翻頁載入、下拉滾動載入原始碼
- 禁止頁面滾動的方法
- 遮罩層禁止頁面滾動遮罩
- js實現圖片上下滾動background-positionJS
- vue之實現日曆----顯示農曆,滾動日曆監聽年月改變Vue
- 直播平臺製作,禁止頁面滾動 / 滾動事件穿透事件穿透
- 迷茫中翻滾
- vue頁面有彈層,禁止頁面滾動Vue
- JavaScript數字上下翻動變化詳解JavaScript
- 監聽 watch props物件屬性監聽 或深度監聽物件
- 啟動資料庫監聽資料庫
- Oracle啟動兩個監聽Oracle
- flutter 中監聽滑動事件Flutter事件
- Android TextSwitcher通知公告自動上下滾動且帶點選事件Android事件
- 用AutoLayout實現分頁滾動
- 前端頁面自定義滾動條前端