Skip to main content

Recipes

Initial Scroll​

The ScrollContainer uses forwardRef under the hood to set the passed ref to the root element. It is div block by default. Therefore to set the initial scroll you should just pass the ref and use it to scroll the container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
export const InitialScrollExample = () => {
    const ref = useRef<HTMLElement>(null);

    useEffect(() => {
        ref.current?.scrollTo({
            left: 1600,
        });
    }, []);

    return (
            <ScrollContainer ref={ref}>
                {/* Content */}
            </ScrollContainer>
    );
};

Inputs​

If the container contains <input/>, <textarea/>, etc, user will lose the possibility to select the text inside them, because the cursor will be intercepted by the container.

To bypass this limitation you can ignore specific element by their selector:

export const InputExample: FC = () => {
    return (
        <ScrollContainer mouseScroll={{ ignoreElements: 'input' }}>
            {/* Content */}
        </ScrollContainer>
    );
};

Deep Ref​

There are situations, when you need to add the scroll by mouse dragging to a container that is inside some other component.

There is the idea how to implement it with simplebar-react:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React, { FC } from 'react';
import { useScrollContainer } from 'react-indiana-drag-scroll';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';

export const DeepRefExample: FC = () => {
    const { ref } = useScrollContainer();

    return (
        <SimpleBar scrollableNodeProps={{ ref }}>
            {/* Content */}
        </SimpleBar>
    );
};