Kaydırma kapsayıcısı

Amaç

Bu kapsayıcı, yerel (native) kaydırma mekanizmasını temel alır ancak kendine özgü kaydırma çubukları ve gölgeler kullanır. Farklı tarayıcılarda tutarlı bir kaydırma görünümü sağlamak için yararlı olabilir.

Kullanım

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

const { observe } = useScroll();

export const App = () => {
    useEffect(() => {
        const unobserve = observe((event) => {
            // kaydırma olaylarını yönet
        });
        return () => unobserve();
    }, [])
    return <effsz-scroll axis='y' thcolor='grey'>
        <div className='first'>...</div>
        <div className='second'>...</div>
    </effsz-scroll>
};

Türler

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