materializecss: tabs with pagination (or indicator there is more)

Question

Following this: https://materializecss.github.io/materialize/tabs.html there is horizontal scrolling if the number of tabs exceeds the horizontal space.

However, is there a way to indicate this to user besides the horizontal scroll bars?

Answer 1

A simple and pure CSS solution would be to use background-attachment: local, which would display a simple image (a gradient in this case):

And yes, there are some other ways using javascript for this task (you can find examples including the CSS solution here) but they may lag and cost performance.

Example for background-attachment: local:

The Tutorial: https://lea.verou.me/2012/04/background-attachment-local/ And the Code for it: https://dabblet.com/gist/2462915

/**
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 */

html {
    background: white;
    font: 120% sans-serif;
}

.scrollbox {
    overflow: auto;
    width: 200px;
    max-height: 200px;
    margin: 15px auto;

    background:
        /* Shadow covers */
        linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
        
        /* Shadows */
        radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background:
        /* Shadow covers */
        linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
        
        /* Shadows */
        radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    
    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
}

<div class="scrollbox">
    <ul>
        <li>Not enough content to scroll</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>


<div class="scrollbox">
    <ul>
        <li>Ah! Scroll below!</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>The end!</li>
        <li>No shadow there.</li>
    </ul>
</div>

(And by the way, you can even modify the scrollbar if you want to.)