Partially Obscured Scrollable Element in Ionic 4
Recently, we encountered an interesting design challenge in the Ionic application we're developing: have a transparent gradient overlay on top of long scrolling text. The following screenshot should make it clear what I'm talking about:
I'm sure it's a simple task for an experienced CSS wizard but since it wasn't immediately obvious to us how to do it best, I'm sure that someone else will also benefit from our learnings.
The basic page layout consists of a fixed header and footer and the scrolling text in the middle:
<ion-header>
<ion-toolbar>
<ion-title>scroll</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Lorem ipsum</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec justo
nunc. Cras congue, nulla vitae bibendum consectetur, erat nunc consectetur
purus, vel feugiat diam mi ut justo. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. In vulputate, tellus
nec tincidunt vestibulum, dolor mauris consequat mauris, id accumsan enim
leo vitae justo. Vivamus id convallis massa. Mauris felis enim, dignissim eu
velit nec, auctor vestibulum est. In augue nisi, pretium id nibh at,
tincidunt interdum eros. Nunc tempus auctor dignissim.
</p>
<p>...</p>
</ion-content>
<ion-footer class="ion-padding ion-text-center">
<ion-button>Continue</ion-button>
</ion-footer>
For creating the transparent overlay, our first impulse was to create a single pixel wide transparent image with required gradient and place it above the footer using absolute positioning:
<ion-footer class="ion-padding ion-text-center">
<img class="gradient" src="assets/gradient.png" />
<ion-button>Continue</ion-button>
</ion-footer>
ion-footer {
position: relative;
}
.gradient {
position: absolute;
width: 100%;
bottom: 76px;
height: 100px;
left: 0;
}
The appearance matched our requirements perfectly. However, the image prevented touch events from reaching the underlying scrolling element which meant that the user couldn't scroll the text if he hit the bottom area covered with the transparent image. With its significant height, this was likely to happen.
The next idea worked better: avoid using images that block touch events and use CSS box-shadow instead.
ion-footer {
box-shadow: 0 0 100px 100px white;
}
This surprisingly simple approach doesn't block touch events so that scrolling works as expected. There's a slight downside of having less control over the gradient but we were somewhat flexible about it. After some experimentation, we were quite satisfied with the result.
