DEV Community

Cover image for CSS: Overscroll, Overflow & Touch Actions. ⛷
Vaibhav Khulbe
Vaibhav Khulbe

Posted on

CSS: Overscroll, Overflow & Touch Actions. ⛷

Okay, three more cool CSS properties before we end this year. Just for a quick recap, previously I have covered topics like subgrids, writing modes, color gamut, etc. Check out what all it's about:

Alright then, now it's time to know more about what is overscroll, how overflow can help and why do you even need something like touch actions!

Overflow GIF

Let that brew overflow!!

➡️ CSS Overscroll

The overscroll property tells the browser what to do when the body content reaches the boundary of the scroll area. Hence the name over-scroll.

So whenever you don't add any overscroll property in your web projects, it defaults to auto. On mobile, you might have experienced a bounce effect when you try to scroll to the bottom (or top) of the page, this behavior of a webpage is controlled by overscroll.

Usually, you will end up using one of the following two properties:

Also, you might have also used these properties to hide the default scrollbar of a webpage. If not, here's how to do it:

Simply go to your CSS file and add the following lines of code to the body element:

body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
Enter fullscreen mode Exit fullscreen mode

Of course, I won't recommend you to completely get rid of scrollbars (unless you have an accessible custom scrollbar) but for some small demos, this trick is helpful.

Some of the keyword values supported by overscroll are:

  • overscroll-behavior: auto; The default mode on all webpages. Does, practically, nothing :')
  • overscroll-behavior: contain; This will prevent scrolling on underlying elements.
  • overscroll-behavior: none; The default behavior is prevented and quite common in removing scrollbars :')

🤩 Some overscroll resources!

Up next...

➡️ CSS Overflow

The overflow is a CSS shorthand property that is used to set the, well, the overflow behavior of an element.

If you see content that is overflowing its parent element's boundary, then it's likely that the overflow is visible and you need to fix this by hiding the overflowing content.

Check this cool example:

Overflow example

Did you notice how the text is just overflowing from its container? It's most likely that they have used something like overflow: visible;. Now, what are the different options we have here?

  • overflow: visible; This is the default behavior which is, yes, pretty bad when you have that para or an image overflowing on a card layout. The content is not clipped and is rendered outside the defined margin/padding.
  • overflow: hidden; That's your rescue! Now the content is clipped (as it should be) but note that there will not be any scrollbars added for you here. Also, you won't be able to drag, scroll in any direction.
  • overflow: scroll; You got the scrollbars here! But the content is still clipped according to the padding. Note that the scrollbar will always be visible no matter what. :')
  • overflow: auto; This will automatically decide whether to clip the content or not. If there the content fits inside the container, it will be similar to the default visible behavior.

To achieve this scroll:

Overscroll enabled GIF

You need to add the following in your CSS:

p {
  width: 12em;
  height: 6em;
  overflow: scroll; /* always show scrollbars */ 
Enter fullscreen mode Exit fullscreen mode

🤩 Some overflow resources!

And finally, we got...

➡️ CSS Touch Actions

We come to the touch-enabled devices land!

The touch-action property sets how an element's region can be changed on a touch-enabled device.

The exciting features that come with touchscreens like pinch-to-zoom, pan, double-tap to quick zoom, etc can all be controlled with this amazing CSS property.

So, when you start a gesture with your fingers on your smartphone, what happens in the background is that the browser intersects with the touch-action values of the touched element (like a draggable box) and its ancestors (like a body container), up to the one that implements the gesture.

Here are some of the exciting values it comes with:

  • auto: All the panning and zooming features are allowed.
  • none: With this, you disable all the panning and zooming features.
  • pan-x and pan-y: You enable the single-finger horizontal and vertical gestures respectively. Also, there are some sub-values like pan-x, pan-up, pan-left etc.
  • manipulation: Here the standard gestures like panning and pinch-zoom features are turned ON but some non-standard ones like double-tap to zoom are turned OFF. A sweet spot? 😏
  • pinch-zoom: The most exciting of the lot! Enable multi-finger panning and zooming of the page combined with any of the pan- values.

Try to interact with the following demo on a touch-enabled device:

🤩 Some touch-action resources!

Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)

Adopting a #CloudNative architecture means moving in #Kubernetes and the challenges that come with it! Payara Cloud will save you time and effort running apps on the cloud, and ensure everything works with #K8s. Watch this space!#CloudNative #DevHumour #Devmeme #K8meme #DevOps

— Payara (@Payara_Fish) November 17, 2020

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

Top comments (1)

gu profile image

Hello 👋 Thank you for the article!

I'm learning Framer here. So I'm creating the website. And when I've done top nav for mobile -> Open menu state, I used "overscroll-behavior: contain" - and yet, the content under the menu is keep scrolling. Maybe you know how to fix it?

Thank you in advance.