export default ASScroll; /** * Ash's Smooth Scroll 🍑 */ declare class ASScroll { /** * Creates an ASScroll instance * * @typicalname asscroll * @param {object} [parameters] * @param {string|HTMLElement} [parameters.containerElement=[asscroll-container]] The selector string for the outer container element, or the element itself * @param {string|HTMLElement|NodeList} [parameters.scrollElements=[asscroll]] The selector string for the elements to scroll, or the elements themselves * @param {number} [parameters.ease=0.075] The ease amount for the transform lerp * @param {number} [parameters.touchEase=1] The ease amount for the transform lerp on touch devices * @param {string} [parameters.touchScrollType=none] Set the scrolling method on touch devices. Other options are 'transform' and 'scrollTop'. See the [Touch Devices](#touch-devices) section for more info * @param {boolean} [parameters.lockIOSBrowserUI=false] When using an iOS device and touchScrollType is 'transform', this will change the setup to prevent the browser UI from showing/hiding to stop resize events on scroll. * @param {string} [parameters.scrollbarEl=.asscrollbar] The selector string for the custom scrollbar element * @param {string} [parameters.scrollbarHandleEl=.asscrollbar__handle] The selector string for the custom scrollbar handle element * @param {boolean} [parameters.customScrollbar=true] Toggle the custom scrollbar * @param {boolean} [parameters.scrollbarStyles=true] Include the scrollbar CSS via Javascript * @param {boolean} [parameters.disableNativeScrollbar=true] Disable the native browser scrollbar * @param {boolean} [parameters.disableRaf=false] Disable internal requestAnimationFrame loop in order to use an external one * @param {boolean} [parameters.disableResize=false] Disable internal resize event on the window in order to use an external one * @param {boolean} [parameters.limitLerpRate=true] Match lerp speed on >60Hz displays to that of a 60Hz display * @param {string} [parameters.blockScrollClass=.asscroll-block] The class to add to elements that should block ASScroll when hovered */ constructor(parameters?: { containerElement?: string | HTMLElement; scrollElements?: string | HTMLElement | NodeList; ease?: number; touchEase?: number; touchScrollType?: string; lockIOSBrowserUI?: boolean; scrollbarEl?: string; scrollbarHandleEl?: string; customScrollbar?: boolean; scrollbarStyles?: boolean; disableNativeScrollbar?: boolean; disableRaf?: boolean; disableResize?: boolean; limitLerpRate?: boolean; blockScrollClass?: string; }); events: Events; controller: Controller; /** * Enable ASScroll. * * @example Enables ASScroll on the '.page' element and resets the scroll position to 0 * asscroll.enable({ newScrollElements: document.querySelector('.page'), reset: true }) * * @example Enables ASScroll and restores to the previous position before ASScroll.disable() was called * asscroll.enable({ restore: true }) * * @param {object} [parameters] * @param {boolean|NodeList|HTMLElement} [parameters.newScrollElements=false] Specify the new element(s) that should be scrolled * @param {boolean} [parameters.reset=false] Reset the scroll position to 0 * @param {boolean} [parameters.restore=false] Restore the scroll position to where it was when disable() was called * @param {boolean} [parameters.horizontalScroll=false] Toggle horizontal scrolling */ enable(parameters?: { newScrollElements?: boolean | NodeList | HTMLElement; reset?: boolean; restore?: boolean; horizontalScroll?: boolean; }): void; /** * @deprecated since 2.0.0 * @param {boolean} restore * @param {boolean} reset * @param {boolean} newTarget * @param {boolean} horizontalScroll */ enable(restore?: boolean, reset?: boolean, newTarget?: boolean, horizontalScroll?: boolean): void; /** * Disable ASScroll. * * @example Disables the ability to manually scroll whilst still allowing position updates to be made via asscroll.currentPos, for example * asscroll.disable({ inputOnly: true }) * * @param {object} [parameters] * @param {boolean} [parameters.inputOnly=false] Only disable the ability to manually scroll (still allow transforms) */ disable(parameters?: { inputOnly?: boolean; }): void; /** * @deprecated since 2.0.0 * @param {boolean} disableOnly */ disable(disableOnly: boolean): void; /** * Call the internal animation frame request callback. * @function */ update: () => void; /** * Call the internal resize callback. * @function * @param {object} [parameters] * @param {number} [parameters.width] Window width * @param {number} [parameters.height] Window height */ resize: (parameters?: { width?: number; height?: number; }) => void; /** * Add an event listener. * * @example Logs out the scroll position when the 'scroll' event is fired * asscroll.on('scroll', scrollPos => console.log(scrollPos)) * * @example Returns the target scroll position and current scroll position during the internal update loop * asscroll.on('update', ({ targetPos, currentPos }) => console.log(targetPos, currentPos)) * * @example Fires when the lerped scroll position has reached the target position * asscroll.on('scrollEnd', scrollPos => console.log(scrollPos)) * * @param {string} eventName Name of the event you wish to listen for * @param {function} callback Callback function that should be executed when the event fires */ on(eventName: string, callback: Function): void; /** * Remove an event listener. * @param {string} eventName Name of the event * @param {function} callback Callback function */ off(eventName: string, callback: Function): void; /** * Scroll to a given position on the page. * @param {number} targetPos Target scroll position * @param {boolean} [emitEvent=true] Whether to emit the external scroll events or not */ scrollTo(targetPos: number, emitEvent?: boolean): void; /** * Returns the target scroll position. * * @return {number} Target scroll position */ get targetPos(): number; set currentPos(arg: number); /** * Gets or sets the current scroll position. * * @example Sets the scroll position to 200, bypassing any lerps * asscroll.currentPos = 200 * * @param {number} scrollPos The desired scroll position * @return {number} Current scroll position */ get currentPos(): number; /** * Returns the maximum scroll height of the page. * @return {number} Maxmium scroll height */ get maxScroll(): number; /** * Returns the outer element that ASScroll is attached to. * @return {HTMLElement} The outer element */ get containerElement(): HTMLElement; /** * Returns the the element(s) that ASScroll is scrolling. * @return {Array} An array of elements ASScroll is scrolling */ get scrollElements(): any[]; /** * Returns whether or not ASScroll is in horizontal scroll mode * @return {boolean} The status of horizontal scroll */ get isHorizontal(): boolean; /** * Returns whether or not ASScroll is actively transforming the page element(s). For example, would return false if running on a touch device and touchScrollType !== 'transform', or if ASScroll was currently disabled via the .disable() method. * @return {boolean} The status of actively controlling the page scroll */ get isScrollJacking(): boolean; /** * @deprecated since 2.0.0 - use targetPos instead * @see {@link ASScroll#targetPos} */ get scrollPos(): void; /** * @deprecated since 2.0.0 - use currentPos instead * @see {@link ASScroll#currentPos} */ get smoothScrollPos(): void; /** * @deprecated since 2.0.0 - use update() instead * @see {@link ASScroll#update} */ onRaf(): void; /** * @deprecated since 2.0.0 - use resize() instead * @see {@link ASScroll#resize} */ onResize(): void; } import Events from "./Events"; import Controller from "./Controller";