滚动实用程序 | Quasar 中文网

滚动实用程序

提示

有关 UMD 构建的使用方法，请参阅此处。

¥For usage with the UMD build see here.

确定滚动容器(Determine scrolling container)

¥Determine scrolling container

或许值得一读此处是如何实现的。

¥Might be worthwhile to read how this is done here.

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 元素。如果没有找到，则认为滚动发生在文档本身上。

¥This method searches for a parent DOM element which has one of the scroll or overflow-auto Quasar CSS Helper class attached to it. If none is found, then it considers that the scrolling takes place on the document itself.

请注意，如果相应元素未溢出（例如：高度小于其内部内容高度），则简单地将 scroll CSS 类附加到 DOM 元素或 Vue 组件上将不起作用。

¥Please note that simply attaching scroll CSS class to a DOM element or on a Vue component will have no effect if the respective element is not overflowed (example: a height smaller than its inner content height).

良好容器示例：

¥Example of good container:

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

获取/设置滚动位置(Get/set scroll position)

¥Get/set scroll position

垂直方向：

¥Vertically:

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

水平方向：

¥Horizontally:

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

滚动到元素(Scrolling to an element)

¥Scrolling to an element

以下是使用滚动实用程序滚动到其容器内元素的示例。它不会考虑容器是否显示在屏幕上或更复杂的情况。

¥Below is an example using the scroll utils to scroll to an element within its container. It does not take into consideration if the container is on screen or more complex cases.

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)
}

确定滚动大小(Determine scroll size)

¥Determine scroll size

垂直方向：

¥Vertically:

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)

水平方向：

¥Horizontally:

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)

确定滚动条宽度(Determining scrollbar width)

¥Determining scrollbar width

计算滚动条的宽度（以像素为单位）。

¥Computes the width of scrollbar in pixels.

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

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

1. Introduction

2. 确定滚动容器(Determine scrolling container)

3. 获取/设置滚动位置(Get/set scroll position)

3.1. 滚动到元素(Scrolling to an element)

4. 确定滚动大小(Determine scroll size)

5. 确定滚动条宽度(Determining scrollbar width)