CSS: Overscroll, Overflow & Touch Actions. ⛷
Tags: css, html, webdev, tutorial
Published: 2020-12-04 13:42:26

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: 

{% post https://dev.to/vaibhavkhulbe/css-color-gamut-containment-344a %}

{% post https://dev.to/vaibhavkhulbe/css-subgrids-multi-column-and-writing-modes-3jk7 %}

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](https://media.giphy.com/media/POJt9CrJmvN5PageSf/giphy.gif)
<figcaption>Let that brew overflow!!</figcaption>

---

# ➡️ [CSS Overscroll](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) 

> 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**](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x): to handle the browser scroll behavior when the horizontal (x-axis) boundary is reached.
- [**overscroll-behavior-y**](https://developer.mozilla.org/en-US/docs/Web/CSS/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:

```css
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](https://css-tricks.com/almanac/properties/o/overscroll-behavior/)
- [Take control of your scroll: customizing pull-to-refresh and overflow effects by Google Web Developers](https://developers.google.com/web/updates/2017/11/overscroll-behavior)
- [Scroll Bouncing On Your Websites by Smashing Magazine](https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/)

Up next...

# ➡️ [CSS Overflow](https://developer.mozilla.org/en-US/docs/Web/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](https://dev-to-uploads.s3.amazonaws.com/i/5rkd8k6fx5kpijnji4fa.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/koi8xl5ryfd53bqcc6j6.gif)

You need to add the following in your CSS:

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

🤩 **Some overflow resources!**

- [The CSS Overflow Property on CSS Tricks](https://css-tricks.com/the-css-overflow-property/)
- [Finding/Fixing Unintended Body Overflow by CSS Tricks](https://css-tricks.com/findingfixing-unintended-body-overflow/)
- [Debug scrollable overflow by Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow)

And finally, we got...

# ➡️ [CSS Touch Actions](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) 

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`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#pan-x), [`pan-up`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#pan-keywords), [`pan-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#pan-keywords) 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:

{% codepen https://codepen.io/team/css-tricks/pen/PXbPXL default-tab=js,result %}

🤩 **Some touch-action resources!**

- [Touch Action Options on Google Web Developers](https://developers.google.com/web/updates/2016/10/touch-action)
- [Touch-action pinch-zoom CSS property Sample by Google Chrome Developers](https://googlechrome.github.io/samples/touch-action/)
- [CSS touch-action property by caniuse.com](https://caniuse.com/css-touch-action)

---

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

---
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="en" dir="ltr">Adopting a <a href="https://twitter.com/hashtag/CloudNative?src=hash&amp;ref_src=twsrc%5Etfw">#CloudNative</a> architecture means moving in <a href="https://twitter.com/hashtag/Kubernetes?src=hash&amp;ref_src=twsrc%5Etfw">#Kubernetes</a> 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 <a href="https://twitter.com/hashtag/K8s?src=hash&amp;ref_src=twsrc%5Etfw">#K8s</a>. Watch this space!<a href="https://twitter.com/hashtag/CloudNative?src=hash&amp;ref_src=twsrc%5Etfw">#CloudNative</a> <a href="https://twitter.com/hashtag/DevHumour?src=hash&amp;ref_src=twsrc%5Etfw">#DevHumour</a> <a href="https://twitter.com/hashtag/Devmeme?src=hash&amp;ref_src=twsrc%5Etfw">#Devmeme</a> <a href="https://twitter.com/hashtag/K8meme?src=hash&amp;ref_src=twsrc%5Etfw">#K8meme</a> <a href="https://twitter.com/hashtag/DevOps?src=hash&amp;ref_src=twsrc%5Etfw">#DevOps</a> <a href="https://t.co/iIEANhfVRt">pic.twitter.com/iIEANhfVRt</a></p>&mdash; Payara (@Payara_Fish) <a href="https://twitter.com/Payara_Fish/status/1328647953381257226?ref_src=twsrc%5Etfw">November 17, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
---

#### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates)

##### 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](https://medium.com/@vaibhavkhulbe)'s my Medium profile.