TIP
For usage with the UMD build see here.
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)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.
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
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 scrollingHorizontally:
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 scrollingScrolling 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
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
Computes the width of scrollbar in pixels.
import { scroll } from 'quasar'
const { getScrollbarWidth } = scroll
console.log(getScrollbarWidth()) // 16 (it's in pixels)