Imagine a HTML table, with alternating rows with different background colours. The table content overflows the container on the right but on a mobile browser, with no obvious scrollbar, there is no affordance to know the table is overflowing.

I want to have a shadow/indicator on the side of the table that is overflowing the container.

Go to solutions that won't work

Many moons ago, Lea Verou popularised this approach: http://lea.verou.me/2012/04/background-attachment-local/

That general approach works great when your table does not have a background color. But mine does, so it doesn't work [insert Raspberry noise].

Then I remembered there was some way to do this with scroll() timelines. A web search or two past various web Illuminati (hi Adam!, hi Bramus) landed me at Dave's site.

Thank goodness Dave had written this as it got me a decent distance to the solution I ended up with.

However, the trouble I had with Dave's example as it was, was the same as the old skool one from years hence – it only worked if you have a table with no background colours in it. With background colors, it covered the inset shadows of the container.

"He conquers who endures." — Persius

So, having thought about it a little more, here is what I came up with…

The solution

I've got a table with a few columns, you can use whatever HTML table you like – mine shows the top 6 teams and their stats in the England Premier League.

Here is the result with the shadow technique added:

See the Pen
Untitled by Ben Frain (@benfrain)
on CodePen.

Let's look at how this works. The table in a standard HTML table, nothing unusual there. It gets a wrapping element, such as a div, let's call the wrapping element 'TableWrapper'.

CSS Grid for layout

We set the TableWrapper layout with CSS Grid with a single row, and columns at either end for where we want our scroll indicators. For example:

.TableWrapper {
    display: grid;
    grid-auto-flow: column;
    grid-template: "leftindicator content rightindicator" auto / 30px max-content 30px;
    /* More styles */
}

Remember I said the table had background color? Let's add that to our table now.

table {
    tr:nth-child(even) {
        background-color: #444;
    }
}

We need our indicators to sit in the columns at either side of our grid. You could add extra elements inside the wrapper but I used ::before and ::after pseudo elements. I made them about 30px wide and gave them a linear gradient to make the shadow effect – one fades from dark to the transparent in one direction, and the other fades in another direction.

I ended up using grid to place the indicators, rather than something more conventional like absolute positioning, because this way, they will sit at either end of the table, but crucially, we can make them appear on top of the table and stuck to the edge of the scroll container with position: sticky. The higher z-index on the before/after ensures they appear above the table background.

Let's add the before/after elements into our TableWrapper. Here is the complete rule – note the grid-template to layout everything in the container. I removed the scroll-bar just to make the scroll indicators more needed (because a scrollbar is a pretty good scroll affordance already ;)).

.TableWrapper {
    display: grid;
    grid-auto-flow: column;
    grid-template: "leftindicator content rightindicator" auto / 30px max-content 30px;
    overflow-x: auto;
    scrollbar-width: none;

    &::before,
    &::after {
        content: "";
        height: 100%;
        width: 30px;
        display: block;
        z-index: 10;
        position: sticky;
        opacity: 0;
    }

    &::before {
        grid-area: leftindicator;
        left: 0;
        animation: show-indicator linear reverse;
        animation-timeline: scroll(nearest inline);
        background-image: linear-gradient(to right, #000, transparent);
    }

    &::after {
        grid-area: rightindicator;
        right: 0;
        animation: show-indicator linear;
        animation-timeline: scroll(nearest inline);
        background-image: linear-gradient(to left, #000, transparent);
    }
}

Modern CSS magic

There are a few things that only work due to modern CSS. If you want to know more about modern CSS, here is where I pimp my book, Responsive Web Design with HTML5 and CSS which covers all this stuff – find out more at https://rwd.education

First, I'm making both pseudo-elements position: sticky. The left/::before stuck to the left, the right/::after to the right.

Secondly I'm using animation-timeline, which is being set to scroll(nearest inline). So, if your brower doesn't support that, you won't see it.

In plain english, we have an animation, defined like any other with @keyframes:

@keyframes show-indicator {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

The animation is used on both before/after element and 'driven' by the scroll, with the ::before running the animation in reverse. We set the scroll() to be the nearest scrollable ancestor of the element we have set it on (because the before/after are effectively children of the TableWrapper). Super important — always put your animation-timeline after the animation shorthand otherwise the shorthand will wipe it out!

And that is it. Scroll indicators that show when either end of the scrollable content can be scrolled — even if that content has a background.

Postscript: I found this after the fact as well! Bunch more approaches too https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/#aa-add-scroll-shadows-to-a-scroll-container