滚动容器确定

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

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

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

此方法搜索父DOM元素，该元素附加了一个“scroll”或“overflow-auto”Quasar CSS辅助类。 如果没有找到，则认为滚动发生在文档本身上。

请注意，如果相应的元素没有溢出，简单将scroll CSS类附加到DOM元素或Vue组件上是没有效果的（例如，使用：CSSswops：hidden并且高度小于其内部内容高度）。

好容器的例子：

<!--
  Quasar CSS辅助类'overflow-hidden'和 
  style="overflow: hidden" 是等效的
-->
<div class="scroll overflow-hidden" style="height: 100px">
  ...content expanding over the 100px height from container...
</div>

获取/设置滚动位置

垂直:

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

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

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

水平:

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

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

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

滚动到元素

下面是一个使用scroll utils滚动到容器中的一个元素的示例。它不考虑容器是在屏幕上还是在更复杂的情况下。

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

// 采用元素对象(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 { getScrollWidth } = scroll

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

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

滚动条宽度确定

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

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

console.log(getScrollbarWidth()) // 16 (它以像素为单位)