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:

CSS: Color gamut & Containment. 🌈

Vaibhav Khulbe ・ Oct 23 '20

#css #html #webdev #tutorial

CSS: Subgrids, Multi-column, & Writing Modes. 🥸

Vaibhav Khulbe ・ Nov 20 '20

#css #html #webdev #tutorial

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!

➡️ 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:

• overscroll-behavior-x: to handle the browser scroll behavior when the horizontal (x-axis) boundary is reached.
• overscroll-behavior-y: it's the same thing as above but on the vertical (y-axis) boundary.

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 */
}

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!

• overscroll-behavior on CSS Tricks
• Take control of your scroll: customizing pull-to-refresh and overflow effects by Google Web Developers
• Scroll Bouncing On Your Websites by Smashing Magazine

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:

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:

You need to add the following in your CSS:

p {
  .
  .
  .
  width: 12em;
  height: 6em;
  overflow: scroll; /* always show scrollbars */ 
  .
  .
  .
}

🤩 Some overflow resources!

• The CSS Overflow Property on CSS Tricks
• Finding/Fixing Unintended Body Overflow by CSS Tricks
• Debug scrollable overflow by Mozilla Developer Network

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!

• Touch Action Options on Google Web Developers
• Touch-action pinch-zoom CSS property Sample by Google Chrome Developers
• CSS touch-action property by caniuse.com

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 pic.twitter.com/iIEANhfVRt

— 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.