Overflow scroll touch css

-webkit-overflow-scrolling

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

Syntax

/* Keyword values */ -webkit-overflow-scrolling: auto; -webkit-overflow-scrolling: touch; /* Global values */ -webkit-overflow-scrolling: inherit; -webkit-overflow-scrolling: initial; -webkit-overflow-scrolling: revert; -webkit-overflow-scrolling: revert-layer; -webkit-overflow-scrolling: unset; 

Values

Use «regular» scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen.

Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Also creates a new stacking context.

Formal definition

Formal syntax

-webkit-overflow-scrolling = auto | touch

Examples

HTML

div class="scroll-touch"> p>This paragraph has momentum scrollingp> div> div class="scroll-auto"> p>This paragraph does not.p> div> 

CSS

div  width: 100%; overflow: auto; > p  width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; padding: 10px; > .scroll-touch  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */ > .scroll-auto  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */ > 

Results

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• CSS-Tricks article with demo
• Smashing Magazine — describing the effect of scroll bouncing and how it works on different web browsers
• Safari 13 Release notes: Indicates the addition of support for one-finger accelerated scrolling to all frames and overflow:scroll elements, eliminating the need to set -webkit-overflow-scrolling: touch .

Found a content problem with this page?

This page was last modified on Mar 30, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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:

CSS: Color gamut & Containment. 🌈

Vaibhav Khulbe ・ Oct 23 ’20 ・ 6 min read

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

Vaibhav Khulbe ・ Nov 20 ’20 ・ 6 min read

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.

• 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!

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

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.

You need to add the following in your CSS:

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

🤩 Some overflow resources!

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

— Payara (@Payara_Fish) November 17, 2020

Источник

-webkit-overflow-scrolling

Нестандартный: эта функция нестандартна и не входит в стандартную дорожку. Не используйте его на рабочих сайтах, выходящих в Интернет: он подойдет не для всех пользователей. Между реализациями также может быть большая несовместимость, и поведение может измениться в будущем.

В -webkit-overflow-scrolling CSS управляет собственность или не использовать сенсорные устройства на основе импульс прокрутки для данного элемента.

Syntax

Values

Используйте «обычную» прокрутку,при которой содержимое сразу же перестает прокручиваться,когда вы убираете палец с сенсорного экрана.

Используйте импульсную прокрутку,при которой содержимое продолжает прокручиваться некоторое время после завершения жеста прокрутки и удаления пальца с сенсорного экрана.Скорость и продолжительность непрерывной прокрутки пропорциональны интенсивности жеста прокрутки.Также создается новый контекст суммирования.

Formal definition

Формальный синтаксис

Examples

HTML

div class="scroll-touch"> p> This paragraph has momentum scrolling p> div> div class="scroll-auto"> p> This paragraph does not. p> div> 

CSS

div < width: 100%; overflow: auto; > p < width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; padding: 10px; > .scroll-touch < -webkit-overflow-scrolling: touch; / * Делаем ленивую прокрутку * / > .scroll-auto < -webkit-overflow-scrolling: auto; / * Немедленное прекращение прокрутки * / >

Results

Specifications

Не является частью какого-либо стандарта. У Apple есть описание в Справочнике CSS Safari .

Источник