Scroll

The Scroll component is a container that automatically detects when its inner content is too big to fit within its set size. When this happens, it displays a scrollbar so that users can scroll through the content. This makes it ideal for displaying dynamic or lengthy information while keeping the layout neat.

Usage

Wrap any content you want to make scrollable within the Scroll component. You can set a maximum width and height using inline styles or CSS classes. When the content inside the component grows larger than these dimensions, the component will show a scrollbar so users can navigate the hidden parts.

import Scroll from '@components/Layout/Scroll/Scroll'
import Block from '@components/Layout/Block/Block';
import TextBlock from '@components/Basic/TextBlock/TextBlock';

const App = () => {
    return (
        <Scroll style={{"max-width": '200px', "max-height": '200px',}}>
            <TextBlock>
                I am a very long and dynamic text that can be scrolled - lorem Eaque, perspiciatis ad iusto expedita consectetur rerum tempora non nisi, porro tenetur repudiandae.
                Voluptatem magni dolore consequuntur officia nemo quidem minus. Possimus, quibusdam.
            </TextBlock>
        </Scroll>
    );
};

export default App;

In this example, the text is wrapped inside the Scroll component, and the maximum dimensions are set to 200px by 200px. If the text is longer than that, a scrollbar appears so the user can scroll through the content.

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component
ref	ScrollComponentRef	undefined	A reference to the component that gives you access to its methods and the underlying HTML element. Useful if you need to control scrolling programmatically.
onScroll	OnScrollHandler	undefined	A function that is called every time the content is scrolled. This callback receives an object with information (such as scroll direction) about the scroll event.

Methods

Method	Parameters	Return Value	Description
scrollToElement	element: string | HTMLElement	void	Scrolls the content to the specified element. The element must be part of the content inside the Scroll component.
scrollUp	none	void	Scrolls the content upward by a fixed amount.
scrollDown	none	void	Scrolls the content downward by a fixed amount.
begin	none	void	Instantly scrolls the content to the very beginning (top).
end	none	void	Instantly scrolls the content to the very end (bottom).

Guide

Scrolling Programmatically

The Scroll component lets you control the scrolling behavior through code. For example, you can programmatically scroll the content up or down by calling methods like scrollUp() and scrollDown(). These methods are accessed via a reference (ref) to the Scroll component.

The steps to achieve it are as follows:

1. Declare a variable to hold the ref but don’t initialize it with a value.
2. The declared value should have a type of ScrollComponentRef, which you need to import.
3. Set the declared variable as the value of the ref prop of the Scroll component.
4. Call the methods from the ref.

Example

import Scroll, { ScrollComponentRef } from '@components/Layout/Scroll/Scroll'
import Button from '@components/Layout/Button/Button';

const App = () => {
    let scrollRef!: ScrollComponentRef;

    const scrollUp = () => {
        scrollRef.scrollUp();
    }

    const scrollDown = () => {
        scrollRef.scrollDown()
    }

    return (
        <>
            <Scroll style={{"max-width": '200px', "max-height": '200px',}}>
                <TextBlock>
                    I am a very long and dynamic text that can be scrolled - lorem Eaque, perspiciatis ad iusto expedita consectetur rerum tempora non nisi, porro tenetur repudiandae.
                    Voluptatem magni dolore consequuntur officia nemo quidem minus. Possimus, quibusdam.
                </TextBlock>
            </Scroll>

            <Button size='small' click={scrollUp}>Scroll Up</Button>
            <Button size='small' click={scrollDown}>Scroll Down</Button>
        </>
    );
};

export default App;

Scrolling to a Specific Element

The Scroll component also provides a method to automatically scroll to a particular element within its content. This is useful if you want to jump directly to a specific section, such as when a user clicks a button.

The steps to achieve it are as follows:

1. Declare a variable to hold the ref but don’t initialize it with a value.
2. The declared value should have a type of ScrollComponentRef, which you need to import.
3. Set the declared variable as the value of the ref prop of the Scroll component.
4. Use the reference to call the scrollToElement method. Provide either a CSS selector (string) or an HTMLElement as the argument. The target element must be part of the content within the Scroll component.

Example

import Scroll, { ScrollComponentRef } from '@components/Layout/Scroll/Scroll'
import Button from '@components/Layout/Button/Button';
import Block from '@components/Layout/Block/Button';

const App = () => {
    let scrollRef!: ScrollComponentRef;

    const scrollToBlock = () => {
        // Here, we pass a string that matches the target element's class name.
        scrollRef.scrollToElement('.scroll-example');
    }

    return (
        <>
            <Scroll style={{"max-width": '100px', "max-height": '100px',}}>
                <Block>
                    I am a very long and dynamic text that can be scrolled - lorem Eaque, perspiciatis ad iusto expedita consectetur rerum tempora non nisi, porro tenetur repudiandae.
                    <Block class="scroll-example" style={{ border: '1px solid white' }}>Scroll to me</Block>
                    Voluptatem magni dolore consequuntur officia nemo quidem minus. Possimus, quibusdam.
                </Block>
            </Scroll>

            <Button size='small' click={scrollToBlock}>Scroll to Block</Button>
        </>
    );
};

export default App;

Execute Custom Logic When Scrolling Occurs

You can provide an onScroll prop to the Scroll component to run your own code every time the component is scrolled. The onScroll handler receives an object containing useful information about the scroll event. Currently, this object includes:

• scrollDirection: ‘up’ or ‘down’ – Indicates the direction in which the user is scrolling.

Follow these steps to set it up:

1. Create a Scroll Handler - Write a function that will be called whenever a scroll event occurs.
2. Import the Handler Type - Import the OnScrollHandler type from the Scroll component. This ensures your handler has the correct function signature.
3. Attach the Handler - Pass your handler function to the onScroll prop of the Scroll component.

Example

import Scroll, { OnScrollHandler } from '@components/Layout/Scroll/Scroll'
import Button from '@components/Layout/Button/Button';
import Block from '@components/Layout/Block/Button';

const App = () => {
    const handleScroll: OnScrollHandler = (scrollData) => {
        // Your logic
        console.log(scrollData.scrollDirection); // Will log the direction everytime scrolling occurs
    }

    return (
        <>
            <Scroll onScroll={handleScroll} style={{"max-width": '200px', "max-height": '200px',}}>
                <Block>
                    I am a very long and dynamic text that can be scrolled - lorem Eaque, perspiciatis ad iusto expedita consectetur rerum tempora non nisi, porro tenetur repudiandae.
                    Voluptatem magni dolore consequuntur officia nemo quidem minus. Possimus, quibusdam.
                </Block>
            </Scroll>
        </>
    );
};

export default App;

---

In this example, every time the user scrolls inside the Scroll component, the handleScroll function is executed. It receives an object that tells you whether the scroll direction is ‘up’ or ‘down’, allowing you to run additional custom logic as needed.