Scroll container

Purpose

This container is based on the native scroll, but sets its own scrollbar and shadows. This can be useful for uniform scroll display for different browsers.

Usage

import { useEffect } from 'react';
import { useScroll } from 'effsz/scroll';

const { observe } = useScroll();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // handle scroll events
        });
        return () => unobserve();
    }, [])
    return <effsz-scroll axis='y' thcolor='grey'>
        <div className='first'>...</div>
        <div className='second'>...</div>
    </effsz-scroll>
};

Types

/**
 * Scroll container attributes
 */
export interface IScrollContainerAttrs {
    /**
     * Thumb size
     */
    thsize: string;
    /**
     * Thumb radius
     */
    thradius: string;
    /**
     * Thumb color
     */
    thcolor: string;
    /**
     * Shadow size
     */
    shsize: string;
    /**
     * Shadow color
     */
    shcolor: string;
    /**
     * Shadow transition timing function
     */
    shtf: string;
    /**
     * Shadow transition duration
     */
    shdur: string;
    /**
     * Scrollbar color
     */
    sbcolor: string;
    /**
     * Scrollbar transition timing function
     */
    sbtf: string;
    /**
     * Scrollbar transition duration
     */
    sbdur: string;
}

/**
 * Scroll container
 */
export interface IScrollContainerElement extends HTMLElement {
    axis: 'x' | 'y';
    /**
     * Main axis size
     */
    size: number;
    /**
     * Scroll size
     */
    scrollSize: number;
    /**
     * Scroll offset
     */
    scrollOffset: number;
    /**
     * Scroll progress value
     */
    scrollProgress: number;
    /**
     * Scroll to offset value
     * @param offset 
     * @param behavior 
     */
    scrollToOffset(offset: number, behavior?: ScrollBehavior): void;
    /**
     * Scroll by offset value
     * @param offset 
     * @param behavior 
     */
    scrollByOffset(offset: number, behavior?: ScrollBehavior): void;
    /**
     * Scroll to container start
     * @param behavior 
     */
    scrollToStart(behavior?: ScrollBehavior): void;
    /**
     * Scroll to container end
     * @param behavior 
     */
    scrollToEnd(behavior?: ScrollBehavior): void;
    /**
     * Scroll to query target
     * @param query
     * @param behavior 
     */
    scrollToTarget(query: string, options?: ScrollIntoViewOptions): void;
}