Скролл-контейнер

Назначение

Этот контейнер основан на встроенной браузерной прокрутке, но устанавливает собственную полосу скроллбара и тени. Это может быть полезно для единообразного отображения прокрутки в разных браузерах.

Использование

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

const { observe } = useScroll();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // обработка событий контейнера
        });
        return () => unobserve();
    }, [])
    return <effsz-scroll axis='y' thcolor='grey'>
        <div className='first'>...</div>
        <div className='second'>...</div>
    </effsz-scroll>
};

Типизация

/**
 * 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;
}