### Install Zenscroll via npm Source: https://zengabor.github.io/zenscroll Use the npm package manager to install the library. ```bash npm install zenscroll ``` -------------------------------- ### Retrieve current settings Source: https://zengabor.github.io/zenscroll The setup function returns an object containing the current defaultDuration and edgeOffset values. ```javascript var currentSettings = zenscroll.setup() var dd = currentSettings.defaultDuration var eo = currentSettings.edgeOffset ``` -------------------------------- ### Configure custom scroller settings Source: https://zengabor.github.io/zenscroll Applies setup parameters to a custom scroller instance. ```javascript myScroller.setup(500, 10) ``` -------------------------------- ### Set scroll duration Source: https://zengabor.github.io/zenscroll Examples of setting custom durations for various scroll functions. A duration of 0 disables smoothing. ```javascript zenscroll.toY(50, 100) // 100ms == 0.1 second ``` ```javascript zenscroll.to(about, 500) // 500ms == half a second ``` ```javascript zenscroll.center(image2, 2000) // 2 seconds ``` ```javascript zenscroll.to(about, 0) // 0 milliseconds == no smoothing ``` -------------------------------- ### Disable automatic smoothing on local links Source: https://zengabor.github.io/zenscroll Set window.noZensmooth to true before loading the Zenscroll script to prevent automatic event handler installation. ```html ... ``` -------------------------------- ### Get vertical scroll position Source: https://zengabor.github.io/zenscroll Retrieves the current vertical scroll position for the body or a specific scroller instance. ```javascript var bodyY = zenscroll.getY() var myDivY = myDivScroller.getY() ``` -------------------------------- ### Get top position of an element Source: https://zengabor.github.io/zenscroll Calculates the top position of an element relative to the body or a specific scroller. Note that the returned value excludes edge offsets and nested scrollable container calculations. ```javascript var myElemY = zenscroll.getTopOf(myElem) var relativeTopOfElem = myDivScroller.getTopOf(anElemInMyDiv) ``` -------------------------------- ### Enable native smooth-scrolling CSS Source: https://zengabor.github.io/zenscroll Set the scroll-behavior property to smooth on the body or specific containers to leverage native browser support. ```css body, .smooth-container { scroll-behavior: smooth } ``` -------------------------------- ### Configure default duration and edge offset Source: https://zengabor.github.io/zenscroll Sets the default scroll duration in milliseconds and the edge offset in pixels for internal scrolls and direct calls. ```javascript var defaultDuration = 777 // ms var edgeOffset = 42 // px zenscroll.setup(defaultDuration, edgeOffset) ``` -------------------------------- ### Execute callback after scroll completion Source: https://zengabor.github.io/zenscroll Provide a callback function as the last parameter to scroll methods to execute code once the animation finishes. ```javascript // Last line of example 1: zenscroll.intoView(container, 100, function () { myScroller.center(target) }) // Example 2: zenscroll.intoView(container, 100, function () { myScroller.toY(35) }) // Example 3: zenscroll.intoView(container, 100, function () { myScroller.intoView(target) }) ``` -------------------------------- ### Additional scroller methods Source: https://zengabor.github.io/zenscroll Using the custom scroller instance to perform scroll operations. ```javascript myScroller.toY(500) ``` ```javascript myScroller.intoView(target) ``` -------------------------------- ### Center an element with custom duration and offset Source: https://zengabor.github.io/zenscroll Centers an element with a specific duration in milliseconds and a vertical offset in pixels. ```javascript var duration = 500 // milliseconds var offset = 200 // pixels zenscroll.center(image2, duration, offset) ``` -------------------------------- ### Include Zenscroll script tag Source: https://zengabor.github.io/zenscroll Place the script tag at the bottom of your page before the closing body tag. ```html ... ``` -------------------------------- ### Scroll an element into view Source: https://zengabor.github.io/zenscroll Scrolls an element into the viewport. If the element is already visible, no action is taken. ```javascript zenscroll.intoView(image1) ``` -------------------------------- ### Center an element on screen Source: https://zengabor.github.io/zenscroll Scrolls the specified element to the center of the viewport. ```javascript zenscroll.center(image2) ``` -------------------------------- ### Update default duration only Source: https://zengabor.github.io/zenscroll Updates the default duration while leaving other settings unchanged by omitting the second parameter. ```javascript zenscroll.setup(777) // only updates defaultDuration to 777 ``` -------------------------------- ### Scroll inside a scrollable DIV Source: https://zengabor.github.io/zenscroll Instantiate a new scroller for a container element. The container must have a position property set to relative, absolute, or fixed. ```html
ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7
``` -------------------------------- ### Postpone scroll after element resize Source: https://zengabor.github.io/zenscroll Use setTimeout to delay the scroll call when an element's size changes due to a transition. ```javascript image.classList.remove("is-small") setTimeout(function () { zenscroll.intoView(image2) }, 500) ``` -------------------------------- ### Scroll to the top of an element Source: https://zengabor.github.io/zenscroll Use zenscroll.to to animate the scroll position to the top of a specific DOM element. ```javascript var about = document.getElementById("about") zenscroll.to(about) ``` -------------------------------- ### Scroll to a specific vertical position Source: https://zengabor.github.io/zenscroll Use zenscroll.toY to animate the scroll position to a specific vertical pixel coordinate. ```javascript zenscroll.toY(50) ``` -------------------------------- ### Update edge offset only Source: https://zengabor.github.io/zenscroll Updates the edge offset while leaving the default duration unchanged by passing null as the first parameter. ```javascript zenscroll.setup(null, 42) // only updates edgeOffset to 42 ``` -------------------------------- ### Stop current scrolling Source: https://zengabor.github.io/zenscroll Immediately halts any ongoing scroll animation. ```javascript zenscroll.stop() ``` -------------------------------- ### Check if scrolling is active Source: https://zengabor.github.io/zenscroll Returns a boolean indicating whether a scroll operation is currently in progress. ```javascript var isScrolling = zenscroll.moving() ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.