監聽滾動,上下翻頁
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滾動高度
- 頁面滾動偵聽器
- vue監聽頁面中的某個div的滾動事件,並判斷滾動的位置Vue事件
- Flutter 滾動監聽及實戰appBar滾動漸變FlutterAPP
- vue指令做滾動載入 監聽等Vue
- 在資料視窗的文字框中使用滾輪上下翻頁~~
- Flutter 滾動控制元件篇-->滾動監聽及控制(ScrollController)Flutter控制元件Controller
- vue外掛——滾動監聽 vue-scrollwatchVue
- css實現新聞公告上下翻滾效果CSS
- 實現報表滾動到底部翻頁效果
- 滑鼠滑輪上下滾動設定方法_怎樣設定滑鼠上下滾動
- 第 14 章 下拉選單和滾動監聽外掛
- 動態監聽與靜態監聽
- 動態監聽和靜態監聽
- 用Activity的onTouchEvent方法實現監聽手指上下左右滑動
- JS圖片滾動(無縫、平滑、上下左右滾動)效果JS
- vue 數字上下滾動抽獎Vue
- JavaScript 數字上下滾動抽獎JavaScript
- jQuery滑動方式上下左右滾動效果jQuery
- css3實現滑鼠懸浮背景上下翻滾效果CSSS3
- ORACLE動態監聽與靜態監聽Oracle
- oracle靜態監聽和動態監聽Oracle
- 【oracle】動態監聽與靜態監聽Oracle
- 自定義viewgroup(5)--可滾動佈局,GestureDetector手勢監聽View
- table上下對齊滾動條設定
- 一個有上下滾動效果的TextViewTextView
- CSS3實現的div塊上下左右翻滾效果CSSS3
- 如何實現報表滾動到底部進行翻頁的效果
- 同時配置動態監聽與靜態監聽
- 手機網站上下拉動滾動條時卡頓網站
- linux vi編輯器中 快捷鍵上下翻頁Linux
- 【listener】oracle靜態監聽和動態監聽 【轉載】Oracle
- 頁面圖片自動滾動
- 監聽動態註冊
- 動態註冊監聽
- Oracle 動態監聽配置Oracle