滚动工具 | Quasar 框架

滚动工具

提示

有关 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)

此方法搜索具有一个或多个 scroll 或 overflow-auto Quasar CSS 辅助类附加到它的父 DOM 元素。如果未找到，则它认为滚动发生在文档本身。

请注意，如果相应的元素没有溢出（例如：高度小于其内部内容高度），则简单地将 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. 确定滚动条宽度