Skip to content

Commit 7e0ff02

Browse files
committed
Initial commit
0 parents  commit 7e0ff02

3 files changed

Lines changed: 69 additions & 0 deletions

File tree

CONTRIBUTING.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Web Platform Incubator Community Group
2+
3+
This repository is being used for work in the Web Platform Incubator Community Group, governed by the [W3C Community License
4+
Agreement (CLA)](http://www.w3.org/community/about/agreements/cla/). To contribute, you must join
5+
the CG.
6+
7+
If you are not the sole contributor to a contribution (pull request), please identify all
8+
contributors in the pull request's body or in subsequent comments.
9+
10+
To add a contributor (other than yourself, that's automatic), mark them one per line as follows:
11+
12+
```
13+
+@github_username
14+
```
15+
16+
If you added a contributor by mistake, you can remove them in a comment with:
17+
18+
```
19+
-@github_username
20+
```
21+
22+
If you are making a pull request on behalf of someone else but you had no part in designing the
23+
feature, you can remove yourself with the above syntax.

LICENSE.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
All Reports in this Repository are licensed by Contributors under the
2+
[W3C Software and Document
3+
License](http://www.w3.org/Consortium/Legal/2015/copyright-software-and-document). Contributions to
4+
Specifications are made under the [W3C CLA](https://www.w3.org/community/about/agreements/cla/).
5+

README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Boundary Scroll Action
2+
---
3+
4+
# Problem
5+
6+
Scroll chaining is the process of propagating the scroll to the the nearest scrollable parent element once an scrollable reaches its limit. Scroll chaining is not always desirable. For example consider a fixed/absolute position scroller whose scroll should not chain to parent scroller i.e., the document. You can find this UX pattern used in most chat boxes that live at the bottom of the page such as in Facebook or Gmail UI.
7+
8+
To give you a sense of how popular preventing scroll chaining may be, according to my quick http-archive search -ms-scroll-chaining: none is used in 0.4% of top 300K pages despite being limited in functionality and only supported on IE/Edge.
9+
10+
# Current Solution
11+
12+
-ms-scroll-chaining is a vendor specific API. The CSS property provides a simple declarative way to prevent propagation of scroll gestures to parent containers but unfortunately it is only limited to touch/touchpad scrolls.
13+
14+
This means that currently the best cross-browser compatible way to prevent scroll propagation is to have a combination of blocking wheel event listener (bad for performance), blocking keyboard listeners for all scroll inducing keys, carefully crafted touch-action values, and perhaps even -ms-scroll-chaining. These are rather ugly and complex hacks that "-ms-scroll-chaining" should have been able to replace but it cannot in its current form.
15+
16+
# Proposal
17+
18+
The current proposal is a summary of the public discussion from:
19+
https://github.com/w3c/csswg-drafts/issues/769
20+
21+
Introduce a new CSS property to control the scrolling behavior once a scrollable element reaches the boundary of the scrollport. This property will allow the author to hint that the user agent should deny scrolling from being chained to any ancestor. Note that for certain input modes, particularly on devices with a limited screen size and limited alternative input modes, the user agent may ignore the hint and allow scroll chaining to some ancestor, like the document viewport, or all ancestor.
22+
23+
The property can also hint at the overscroll behavior that the browser should take when at the boundary of the scrollport. The overscroll behavior is implementor defined. The property should provide a hint to either allow or disallow the overscroll behavior of the user agent.
24+
25+
The proposal for the syntax is:
26+
```
27+
croll-boundary-behavior{-x,-y}: auto | contain | none
28+
```
29+
30+
where:
31+
auto - Allow the default behavior for the user agent.
32+
contain - Hint to disable scroll chaining. The user agent may show an appropriate overscroll affordance. If the scroll chaining would trigger a non-scroll action, such as a navigation action, this property should be a hint to disable it.
33+
none - Same as contain but also hint that no overscroll affordance should be triggered.
34+
35+
This should apply to all, non-programatic, user scroll actions.
36+
37+
# Issues to file
38+
39+
Should the property disable scroll chaining through itself to an ancestor if scrolling is initiated from a children.
40+
What if the property is attached to a potentially scrollable element without a scrollbox?
41+
What if the property is attached to a non-potentially scrollable element?

0 commit comments

Comments
 (0)