捲動工具 | Quasar 框架

Scrolling Utils

提示

有關 UMD 建置的使用方式，請參閱此處。

確定滾動容器

或許可以閱讀此處關於如何完成此操作的說明。

import { scroll } from 'quasar'
const { getScrollTarget } = scroll

// Get parent DomNode that handles page scrolling
// Usually this is element with classname ".layout-view" or "window"
getScrollTarget(DomElement) // returns a DOM Element (or window Object)

此方法會搜尋父 DOM 元素，該元素附加了 scroll 或 overflow-auto Quasar CSS Helper 類別之一。如果找不到，則認為滾動發生在文件本身上。

請注意，如果相應元素未溢位（範例：高度小於其內部內容高度），則僅將 scroll CSS 類別附加到 DOM 元素或 Vue 元件上將不會有任何效果。

良好容器範例

<div class="scroll" style="height: 100px">
  ...content expanding over the 100px height from container...
</div>

取得/設定滾動位置

垂直地

import { scroll } from 'quasar'
const { getVerticalScrollPosition, setVerticalScrollPosition } = scroll

// Get scroll position of an element or page.
// Use it in conjunction with `getScrollTarget()`
getVerticalScrollPosition(scrollTargetDomElement) // returns a Number (pixels)

// Setting scroll position of an element or page:
setVerticalScrollPosition (scrollTargetElement, offset[, duration])
// if "duration" is specified then it will animate the scrolling

水平地

import { scroll } from 'quasar'
const { getHorizontalScrollPosition, setHorizontalScrollPosition } = scroll

// Get scroll position of an element or page.
// Use it in conjunction with `getScrollTarget()`
getHorizontalScrollPosition(scrollTargetDomElement) // returns a Number (pixels)

// Setting scroll position of an element or page:
setHorizontalScrollPosition (scrollTargetElement, offset[, duration])
// if "duration" is specified then it will animate the scrolling

滾動到元素

以下是使用滾動工具程式滾動到容器內元素的範例。它沒有考慮容器是否在螢幕上或更複雜的情況。

import { scroll } from 'quasar'
const { getScrollTarget, setVerticalScrollPosition } = scroll

// takes an element object
function scrollToElement (el) {
  const target = getScrollTarget(el)
  const offset = el.offsetTop
  const duration = 1000
  setVerticalScrollPosition(target, offset, duration)
}

確定滾動大小

垂直地

import { scroll } from 'quasar'
const { getScrollHeight } = scroll

// get scrolling container inner height
getScrollHeight(scrollTargetDomElement) // returns a Number

console.log( getScrollHeight(el) )
// 824 (it's in pixels always)

水平地

import { scroll } from 'quasar'
const { getScrollWidth } = scroll

// get scrolling container inner height
getScrollWidth(scrollTargetDomElement) // returns a Number

console.log( getScrollWidth(el) )
// 824 (it's in pixels always)

確定滾動條寬度

計算滾動條的寬度（以像素為單位）。

import { scroll } from 'quasar'
const { getScrollbarWidth } = scroll

console.log(getScrollbarWidth()) // 16 (it's in pixels)

發現錯誤？在瀏覽器中編輯此頁面

1. 介紹

2. 確定滾動容器

3. 取得/設定滾動位置

3.1. 滾動到元素

4. 確定滾動大小

5. 確定滾動條寬度