滚动实用程序

滚动容器确定

值得阅读这里以了解是怎么做到的

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

//获取处理页面滚动的父Dom节点
//通常这是带有“.layout-view”或“window”类名的元素
(DOM Element) getScrollTarget(DomElement)

获取/设置滚动位置

import { scroll } from 'quasar'
const { getScrollPosition, setScrollPosition } = scroll

// 获取元素或页面的滚动位置。 将它与`getScrollTarget()`结合使用
(Number pixels) getScrollPosition(scrollTargetDomElement)

// 设置元素或页面的滚动位置:
setScrollPosition (scrollTargetElement, offset[, duration])
// 如果指定了“duration”，那么它将动画滚动

滚动到元素

使用scroll utils滚动到元素的完整示例：

import { scroll } from 'quasar'
const { getScrollTarget, setScrollPosition } = scroll
// takes an element object
function scrollToElement (el) {
  let target = getScrollTarget(el)
  let offset = el.offsetTop - el.scrollHeight
  let duration = 1000
  setScrollPosition(target, offset, duration)
}

滚动高度确定

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

// 获取滚动容器内部高度
(Number) getScrollHeight(scrollTargetDomElement)

console.log( getScrollHeight(el) )
// 824（它始终以像素为单位）

滚动条宽度确定

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

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

console.log(getScrollbarWidth()) // 16 (它以像素为单位)
回到顶部 CSS过渡