Scroll Hints

Scroll Hints

Make your web site or app’s scrollable areas look wonderful with Scroll Hints.

Scroll hints are elegant shadows and fades that immediate a person that there’s extra content material in the event that they scroll within the course of the trace.

The shadows are clever and solely seem on the perimeters which have extra content material.

What’s extra, the hints reply to your scrolling and conceal once you attain the top of the content material.

It seems nice on tables, grids, picture gallaries, charts and extra.

Notice: This part requires zero configuration however may be totally custom-made if wanted.

Helps

This part makes use of the browser-native internet part API so it may be utilized in any HTML webpage and with any framework together with:

1. React
2. Angular
3. Vue
4. HTML/JavaScript

Contains

1. scroll-hints.js // Cross-browser script
2. scroll-hints.mjs // Optimum script for contemporary browsers solely
3. scroll-hints-react.js // Script for React apps

Set up

HTML

<!-- Embrace the downloaded script file -->
<script sort="module" src="./path/to/your/scroll-hints.mjs"></script>

<scroll-hints>
    <!-- scrollable content material goes right here -->
</scroll-hints>

React

MyComponent.js

// Embrace the downloaded script file
import { ScrollHints } from './scroll-hints-react';

perform MyComponent() {
    return (
        <ScrollHints>
            {/* scrollable content material goes right here */}
        </ScrollHints>
    )
}

Angular

my-module.ts

// Embrace the downloaded script file
import './scroll-hints.js';

@NgModule({
    // ...
    schemas: [
        // Include this schema to enable custom web components
        CUSTOM_ELEMENTS_SCHEMA
    ]
})
export class MyModule { }

my-component.html

<scroll-hints>
    <!-- scrollable content material goes right here -->
</scroll-hints>

Vue

MyComponent.vue

<script setup lang="ts">
// Embrace the downloaded script file
import './scroll-hints.js';
</script>

<template>
    <scroll-hints>
        <!-- scrollable content material goes right here -->
    </scroll-hints>
</template>

Configure

Content material

<!--
    You possibly can customise the scroll trace HTML
    by putting content material within the trace slots
-->
<scroll-hints>
    <!-- scrollable content material goes right here -->

    <!-- Overrides the scroll trace on the left -->
    <div class="my-scroll-hint" slot="left-hint"></div>

    <!-- Overrides the scroll trace on the best -->
    <div class="my-scroll-hint" slot="right-hint"></div>

    <!-- Overrides the scroll trace on the highest -->
    <div class="my-scroll-hint" slot="top-hint"></div>

    <!-- Overrides the scroll trace on the underside -->
    <div class="my-scroll-hint" slot="bottom-hint"></div>
</scroll-hints>

Model

/**
 * To customise the kinds you possibly can set these CSS customized properties
 */
scroll-hints {
    --scroll-hint-color: white;       /* default: rbga(0, 0, 0, 0.1);      */
    --scroll-hint-size: 16px;         /* default: 24px                     */
    --scroll-hint-size-x: 24px;       /* default: var(--scroll-hint-size)  */
    --scroll-hint-size-y: 12px;       /* default: var(--scroll-hint-size)  */
    --scroll-hint-inset: 8px;         /* default: 0                        */
    --scroll-hint-inset-top: 12px;    /* default: var(--scroll-hint-inset) */
    --scroll-hint-inset-right: 12px;  /* default: var(--scroll-hint-inset) */
    --scroll-hint-inset-left: 12px;   /* default: var(--scroll-hint-inset) */
    --scroll-hint-inset-bottom: 12px; /* default: var(--scroll-hint-inset) */
}

Have Questions for Suggestions?

Please go away a remark within the remark part and I’ll get again to you as quickly as potential!

Comfortable coding!