## Scroll Components

JavaScript components for infinite scroll, parallax, scroll spy, and smooth scrolling.

### Infinite Scroll Manager

Auto-loads content when scrolling near bottom.

Item 1

Content loaded initially

Item 2

Content loaded initially

Item 3

Content loaded initially

Item 4

Scroll down to load more...

Loading more...

You've reached the end! 🎉

HTML

    <!-- Infinite scroll container -->
            <div
                data-ss="infinite-scroll"
                data-ss-infinite-scroll-threshold="300"
                data-ss-infinite-scroll-url="/api/items"
                style="
                    max-height: 400px;
                    overflow-y: auto;
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 12px;
                "
            >
                <div
                    class="items-container"
                    style="
                        padding: 16px;
                        display: flex;
                        flex-direction: column;
                        gap: 12px;
                    "
                >
                    <!-- Loaded items -->
                    <div
                        class="item"
                        style="
                            padding: 16px;
                            background: var(--color_fill_secondary);
                            border-radius: 8px;
                        "
                    >
                        <strong>Item 1</strong>
                        <p style="margin: 4px 0 0; font-size: 14px; opacity: 0.7">
                            Content loaded initially
                        </p>
                    </div>
                    <div
                        class="item"
                        style="
                            padding: 16px;
                            background: var(--color_fill_secondary);
                            border-radius: 8px;
                        "
                    >
                        <strong>Item 2</strong>
                        <p style="margin: 4px 0 0; font-size: 14px; opacity: 0.7">
                            Content loaded initially
                        </p>
                    </div>
                    <div
                        class="item"
                        style="
                            padding: 16px;
                            background: var(--color_fill_secondary);
                            border-radius: 8px;
                        "
                    >
                        <strong>Item 3</strong>
                        <p style="margin: 4px 0 0; font-size: 14px; opacity: 0.7">
                            Content loaded initially
                        </p>
                    </div>
                    <div
                        class="item"
                        style="
                            padding: 16px;
                            background: var(--color_fill_secondary);
                            border-radius: 8px;
                        "
                    >
                        <strong>Item 4</strong>
                        <p style="margin: 4px 0 0; font-size: 14px; opacity: 0.7">
                            Scroll down to load more...
                        </p>
                    </div>
                </div>

                <!-- Loading indicator -->
                <div
                    class="loading-indicator"
                    style="padding: 24px; text-align: center"
                >
                    <div
                        style="
                            display: inline-flex;
                            align-items: center;
                            gap: 8px;
                            color: var(--color_text_secondary);
                        "
                    >
                        <span
                            style="
                                width: 20px;
                                height: 20px;
                                border: 2px solid var(--color_fill_secondary);
                                border-top-color: var(--color_fill_primary);
                                border-radius: 50%;
                                animation: spin 1s linear infinite;
                            "
                        ></span>
                        Loading more...
                    </div>
                </div>
            </div>

            <!-- End of list message -->
            <div
                style="
                    max-width: 400px;
                    margin-top: 16px;
                    padding: 16px;
                    background: var(--color_fill_secondary);
                    border-radius: 8px;
                    text-align: center;
                "
            >
                <p style="margin: 0; opacity: 0.6">You've reached the end! 🎉</p>
            </div>

### Parallax Manager

Parallax scrolling effects for backgrounds.

## Parallax Effect

Scroll to see the background move at a different speed

## Multi-Layer Parallax

HTML

    <!-- Parallax section -->
            <div
                class="parallax"
                data-speed="0.3"
                style="
                    position: relative;
                    height: 400px;
                    overflow: hidden;
                    border-radius: 12px;
                "
            >
                <div
                    style="
                        position: absolute;
                        inset: -50px;
                        background: linear-gradient(135deg, #667eea, #764ba2);
                        background-size: cover;
                        transform: translateY(0);
                    "
                ></div>
                <div
                    style="
                        position: relative;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        text-align: center;
                    "
                >
                    <div>
                        <h2 style="margin: 0 0 16px; font-size: 48px">
                            Parallax Effect
                        </h2>
                        <p style="margin: 0; font-size: 18px; opacity: 0.9">
                            Scroll to see the background move at a different speed
                        </p>
                    </div>
                </div>
            </div>

            <!-- Multiple parallax layers -->
            <div
                style="
                    position: relative;
                    height: 500px;
                    overflow: hidden;
                    border-radius: 12px;
                    margin-top: 24px;
                "
            >
                <!-- Background layer (slowest) -->
                <div
                    class="parallax"
                    data-speed="0.2"
                    style="
                        position: absolute;
                        inset: -100px;
                        background: linear-gradient(
                            to bottom,
                            #0f0c29,
                            #302b63,
                            #24243e
                        );
                    "
                ></div>

                <!-- Stars layer -->
                <div
                    class="parallax"
                    data-speed="0.3"
                    style="
                        position: absolute;
                        inset: -50px;
                        background-image: radial-gradient(
                            white 1px,
                            transparent 1px
                        );
                        background-size: 50px 50px;
                        opacity: 0.5;
                    "
                ></div>

                <!-- Moon layer -->
                <div
                    class="parallax"
                    data-speed="0.4"
                    style="
                        position: absolute;
                        top: 50px;
                        right: 100px;
                        width: 80px;
                        height: 80px;
                        background: #fef3c7;
                        border-radius: 50%;
                        box-shadow: 0 0 40px rgba(254, 243, 199, 0.5);
                    "
                ></div>

                <!-- Content layer (fastest) -->
                <div
                    class="parallax"
                    data-speed="0.6"
                    style="
                        position: absolute;
                        inset: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    "
                >
                    <h2
                        style="
                            color: white;
                            font-size: 36px;
                            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
                        "
                    >
                        Multi-Layer Parallax
                    </h2>
                </div>
            </div>

### Scroll Spy Manager

Updates navigation based on scroll position for single-page sites.

## Introduction

Welcome to the documentation. This section provides an overview of the library and its capabilities.

## Features

Discover all the powerful features available in this library.

## Usage

Learn how to use the library in your projects.

## API Reference

Complete API documentation with examples.

HTML

    <div
                style="display: grid; grid-template-columns: 200px 1fr; gap: 32px"
            >
                <!-- Scrollspy navigation -->
                <nav
                    data-ss="scrollspy"
                    data-ss-scrollspy-nav=".spy-link"
                    data-ss-scrollspy-threshold="0.3"
                    data-ss-scrollspy-smooth="true"
                    data-ss-scrollspy-offset="-80"
                    style="position: sticky; top: 20px; height: fit-content"
                >
                    <ul
                        style="
                            list-style: none;
                            padding: 0;
                            margin: 0;
                            display: flex;
                            flex-direction: column;
                            gap: 4px;
                        "
                    >
                        <li>
                            <a
                                href="#section-intro"
                                class="spy-link active"
                                style="
                                    display: block;
                                    padding: 10px 16px;
                                    border-radius: 6px;
                                    text-decoration: none;
                                    color: white;
                                    background: var(--color_fill_primary);
                                "
                            >
                                Introduction
                            </a>
                        </li>
                        <li>
                            <a
                                href="#section-features"
                                class="spy-link"
                                style="
                                    display: block;
                                    padding: 10px 16px;
                                    border-radius: 6px;
                                    text-decoration: none;
                                    color: inherit;
                                "
                            >
                                Features
                            </a>
                        </li>
                        <li>
                            <a
                                href="#section-usage"
                                class="spy-link"
                                style="
                                    display: block;
                                    padding: 10px 16px;
                                    border-radius: 6px;
                                    text-decoration: none;
                                    color: inherit;
                                "
                            >
                                Usage
                            </a>
                        </li>
                        <li>
                            <a
                                href="#section-api"
                                class="spy-link"
                                style="
                                    display: block;
                                    padding: 10px 16px;
                                    border-radius: 6px;
                                    text-decoration: none;
                                    color: inherit;
                                "
                            >
                                API
                            </a>
                        </li>
                    </ul>
                </nav>

                <!-- Scrollable content -->
                <div
                    style="
                        height: 400px;
                        overflow-y: auto;
                        border: 1px solid var(--color_line_secondary);
                        border-radius: 12px;
                        padding: 24px;
                    "
                >
                    <section
                        id="section-intro"
                        style="min-height: 300px; margin-bottom: 32px"
                    >
                        <h2>Introduction</h2>
                        <p>
                            Welcome to the documentation. This section provides an
                            overview of the library and its capabilities.
                        </p>
                    </section>
                    <section
                        id="section-features"
                        style="min-height: 300px; margin-bottom: 32px"
                    >
                        <h2>Features</h2>
                        <p>
                            Discover all the powerful features available in this
                            library.
                        </p>
                    </section>
                    <section
                        id="section-usage"
                        style="min-height: 300px; margin-bottom: 32px"
                    >
                        <h2>Usage</h2>
                        <p>Learn how to use the library in your projects.</p>
                    </section>
                    <section id="section-api" style="min-height: 300px">
                        <h2>API Reference</h2>
                        <p>Complete API documentation with examples.</p>
                    </section>
                </div>
            </div>

### Scroll To

Smooth scrolling for anchor links with configurable offset.

Scroll to Section Scroll to Footer

### Target Section

You scrolled here smoothly!

HTML

    <!-- Scroll to links -->
            <div style="display: flex; gap: 12px; flex-wrap: wrap">
                <a
                    href="#target-section"
                    data-ss="scroll-to"
                    data-ss-scroll-target="#target-section"
                    data-ss-scroll-offset="-80"
                    style="
                        padding: 10px 20px;
                        background: var(--color_fill_primary);
                        color: white;
                        text-decoration: none;
                        border-radius: 6px;
                    "
                >
                    Scroll to Section
                </a>
                <a
                    href="#footer"
                    data-ss="scroll-to"
                    data-ss-scroll-target="#footer"
                    style="
                        padding: 10px 20px;
                        background: var(--color_fill_secondary);
                        text-decoration: none;
                        border-radius: 6px;
                    "
                >
                    Scroll to Footer
                </a>
            </div>

            <!-- Target section -->
            <div
                id="target-section"
                style="
                    margin-top: 200px;
                    padding: 40px;
                    background: var(--color_fill_secondary);
                    border-radius: 12px;
                    text-align: center;
                "
            >
                <h3 style="margin: 0 0 8px">Target Section</h3>
                <p style="margin: 0; opacity: 0.7">You scrolled here smoothly!</p>
            </div>

### Scroll To Top Button

Scroll-to-top button that appears after scrolling down.

HTML

    <!-- Scroll to top button -->
            <button
                data-ss="scroll-to-top"
                data-ss-scroll-threshold="300"
                style="
                    position: fixed;
                    bottom: 24px;
                    right: 24px;
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                    background: var(--color_fill_primary);
                    color: white;
                    border: none;
                    cursor: pointer;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                    opacity: 0;
                    transition:
                        opacity 0.3s,
                        transform 0.3s;
                    transform: translateY(20px);
                "
            >
                ↑
            </button>

            <!-- Button visible state -->
            <button
                style="
                    position: relative;
                    width: 48px;
                    height: 48px;
                    border-radius: 50%;
                    background: var(--color_fill_primary);
                    color: white;
                    border: none;
                    cursor: pointer;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 20px;
                "
            >
                ↑
            </button>

            <!-- Alternative styles -->
            <div style="display: flex; gap: 16px; margin-top: 16px">
                <!-- With text -->
                <button
                    style="
                        padding: 12px 20px;
                        border-radius: 24px;
                        background: var(--color_fill_primary);
                        color: white;
                        border: none;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                    "
                >
                    <span>↑</span>
                    <span>Back to top</span>
                </button>

                <!-- Outline style -->
                <button
                    style="
                        width: 48px;
                        height: 48px;
                        border-radius: 50%;
                        background: white;
                        color: var(--color_fill_primary);
                        border: 2px solid var(--color_fill_primary);
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 20px;
                    "
                >
                    ↑
                </button>

                <!-- Gradient style -->
                <button
                    style="
                        width: 48px;
                        height: 48px;
                        border-radius: 12px;
                        background: linear-gradient(135deg, #667eea, #764ba2);
                        color: white;
                        border: none;
                        cursor: pointer;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 20px;
                    "
                >
                    ↑
                </button>
            </div>

### JavaScript API

Programmatic control of scroll components.

JavaScript

    <script>
                // InfiniteScrollManager
                import { InfiniteScrollManager } from "stylescape";

                const infiniteScroll = new InfiniteScrollManager(container, {
                    threshold: 300,
                    url: "/api/items",
                    page: 1,
                    onLoad: async (page) => {
                        const response = await fetch(`/api/items?page=${page}`);
                        return response.json();
                    },
                    onRender: (items) => {
                        items.forEach((item) =>
                            container.appendChild(createItemElement(item)),
                        );
                    },
                    onEnd: () => {
                        showEndMessage();
                    },
                });

                infiniteScroll.loadMore();
                infiniteScroll.reset();
                infiniteScroll.pause();
                infiniteScroll.resume();

                // ParallaxManager
                import { ParallaxManager } from "stylescape";

                const parallax = new ParallaxManager(element, {
                    speed: 0.3,
                    direction: "vertical",
                    overflow: true,
                });

                parallax.enable();
                parallax.disable();
                parallax.update();

                // ScrollSpyManager
                import { ScrollSpyManager } from "stylescape";

                const scrollSpy = new ScrollSpyManager(navElement, {
                    navSelector: ".nav-link",
                    sectionSelector: "section[id]",
                    threshold: 0.3,
                    offset: -80,
                    smooth: true,
                    activeClass: "is-active",
                    onChange: (activeSection) => {
                        console.log("Active section:", activeSection.id);
                    },
                });

                scrollSpy.refresh();
                scrollSpy.destroy();

                // SoftScrollManager
                import { SoftScrollManager } from "stylescape";

                // Enable smooth scroll for all anchor links
                SoftScrollManager.enableForSelector(".scroll-link", 80); // 80px offset

                // Programmatic scroll
                SoftScrollManager.scrollTo("#section", {
                    offset: -80,
                    duration: 500,
                    easing: "easeInOutCubic",
                });

                SoftScrollManager.scrollToTop();
                SoftScrollManager.scrollToBottom();
            </script>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!