|
| 1 | +<pre class='metadata'> |
| 2 | +Title: CSS Scroll Boundary Behavior Module Level 1 |
| 3 | +Shortname: scroll-boundary-behavior |
| 4 | +Level: 1 |
| 5 | +Status: CG-DRAFT |
| 6 | +Work Status: Exploring |
| 7 | +Group: WICG |
| 8 | +URL: https://wicg.github.io/scroll-boundary-behavior/ |
| 9 | +Editor: Benoit Girard, Facebook, bgirard@fb.com |
| 10 | +Abstract: This module defines 'scroll-boundary-behavior' to control the behavior when a scroll position of a <a>potentially scrollable</a> element reaches the edge of the <a>scrollport</a>. |
| 11 | +Abstract: This allows content authors to hint that the <a>boundary default actions</a>, |
| 12 | +Abstract: such as scroll chaining and overscroll, should not be triggered. |
| 13 | +</pre> |
| 14 | + |
| 15 | +<pre class='anchors'> |
| 16 | +urlPrefix: https://www.w3.org/TR/css-display-3/ |
| 17 | + type: dfn; text: containing block chain |
| 18 | +urlPrefix: https://www.w3.org/TR/cssom-view-1/ |
| 19 | + type: dfn; text: potentially scrollable |
| 20 | +urlPrefix: https://www.w3.org/TR/uievents/ |
| 21 | + type: dfn; text: default action |
| 22 | + type: dfn; text: default actions |
| 23 | +url: https://dom.spec.whatwg.org/#dom-event-preventdefault |
| 24 | + type: dfn; text: preventDefault |
| 25 | +</pre> |
| 26 | + |
| 27 | +Introduction {#intro} |
| 28 | +===================== |
| 29 | + |
| 30 | +<em>This section is not normative.</em> |
| 31 | + |
| 32 | +A content author does not necessarily want <a>scroll chaining</a> to occur for all scrollable containers. Some scroll containers may be part of a <a>containing block chain</a> but may serve a different logical purpose in the document and may want to prevent scrolling from continuing up the <a>scroll chain</a>. To achieve this, a content author will install event listeners without the passive flag set and will use <a>preventDefault</a> when there is a risk that scroll chaining will occur. This is detrimental for the following reasons: |
| 33 | +* The user agent may in the future introduce new input methods for scrolling that are not supported by the content author's event listeners. |
| 34 | +* A non passive event listener will delay scrolling because the user agent will have to wait for the result of the event listener to determine if <a>preventDefault</a> was called causing increased scroll latency. |
| 35 | +* When scrolling is performed near the edge of the <a>scroll boundary<a> the <a>default action</a> may cause both scrolling to the edge of the scrollable container and a <a>boundary default action</a>. Calling <a>preventDefault</a> will not only cancel the <a>boundary default action</a> but also the scroll to the edge of the <a>scrollport</a>. |
| 36 | +* The <a>default action</a> for the event may also provide additional behavior that the author does not want to cancel such as an overscroll affordance. <a>preventDefault</a> doesn't allow the content author to cancel only some of the <a>default actions</a> such as scroll chaining. |
| 37 | + |
| 38 | +Thus, it is not possible for a content author to control <a>scroll chaining</a> and overscroll in a robust, performant and forward compatible way. The <a>scroll-boundary-behavior</a> property fixes this shortcoming. |
| 39 | + |
| 40 | +<pre class=example> |
| 41 | +A 'position: fixed' left navigation bar may not want to hand off scrolling to the |
| 42 | +document but does not want to prevent native overscroll affordances. |
| 43 | +</pre> |
| 44 | + |
| 45 | +Scroll chaining and boundary default actions {#scroll-chaining-and-boundary-default-actions} |
| 46 | +========================== |
| 47 | + |
| 48 | +<em>Operating Systems have rules for scrolling such as scroll chaining and overscroll affordances. This specification does not mandate if and how scroll chaining or overscroll affordances be implemented. This specification only allows the content author to disable them if any are implemented.</em> |
| 49 | + |
| 50 | +<dfn>Scroll chaining</dfn> is when scrolling is propagated from one scrollable container to an ancestor scrollable container following the <a>scroll chain</a>. Typically scroll chaining is performed starting at the event target recursing up the <a>containing block chain</a>. When a <a>potentially scrollable</a> element in this chain receives a scrollable event or gesture it may act on it and/or pass it up the chain. Chaining typically occurs when the <a>scrollport</a> has reached its boundary. |
| 51 | + |
| 52 | +A <dfn>scroll chain</dfn> is the order in which scrolling is propagated from one scrollable container to another. |
| 53 | + |
| 54 | +<dfn>Scroll boundary</dfn> refers to when the scroll position of a <a>potentially scrollable</a> element reaches the edge of the <a>scrollport<a>. In the non-scrollable case the element is always considered to be at the scroll boundary. |
| 55 | +
|
| 56 | +<dfn>Boundary default action</dfn> refers to the user-agent-defined <a>default action</a> performed when scrolling against the edge of the <a>scrollport</a>. This may be scroll chaining, showing an overscroll affordance and/or performing a navigation action. |
| 57 | + |
| 58 | +Issue(WICG/scroll-boundary-behavior#4): Should this specification apply to a scrollable element, potentially scrollable element or any element. |
| 59 | + |
| 60 | +Overview {#overview} |
| 61 | +========================== |
| 62 | + |
| 63 | +This module introduces control over the behavior of a <a>potentially scrollable</a> element when its <a>scrollport</a> reaches the boundary of its scroll box. It allows the content author to specify that a <a>potentially scrollable</a> element must prevent scroll chaining and/or overscroll affordances. |
| 64 | + |
| 65 | +Scroll Boundary Behavior Properties {#scroll-boundary-behavior-properties} |
| 66 | +========================== |
| 67 | + |
| 68 | +These properties specify how a <a>potentially scrollable</a> element must behave when scrolling. A element that is not <a>potentially scrollable</a> must accept but ignore the values of this property. This property must be applied to all input methods supported by the user agent. |
| 69 | + |
| 70 | +Note: This property should provide guarantees that are, at least, as strong as <a>preventDefault</a> for preventing both scroll chaining and overscroll. Doing otherwise would cause content authors to use <a>preventDefault</a> instead. |
| 71 | + |
| 72 | +<pre class=propdef> |
| 73 | +Name: scroll-boundary-behavior-x, scroll-boundary-behavior-y |
| 74 | +Value: ''contain'' | ''none'' | ''auto'' |
| 75 | +Initial: ''auto'' |
| 76 | +Applies to: <a>potentially scrollable</a> elements |
| 77 | +Inherited: no |
| 78 | +Percentages: N/A |
| 79 | +Media: visual |
| 80 | +Computed value: see individual properties |
| 81 | +Animatable: no |
| 82 | +Canonical order: <abbr title="follows order of property value definition">per grammar</abbr> |
| 83 | +</pre> |
| 84 | + |
| 85 | +The 'scroll-boundary-behavior-x' property specifies the behavior of the 'scroll-boundary-behavior' in the horizontal direction and the 'scroll-boundary-behavior-y' property specifies the handling of the 'scroll-boundary-behavior' in the vertical direction. When scrolling is performed along both the horizontal and vertical axes at the same time, the 'scroll-boundary-behavior' of each respective axis should be considered independently. |
| 86 | + |
| 87 | +<pre class=propdef> |
| 88 | +Name: scroll-boundary-behavior |
| 89 | +Value: ''contain'' | ''none'' | ''auto'' |
| 90 | +Initial: ''auto'' |
| 91 | +Applies to: <a>potentially scrollable</a> elements |
| 92 | +Inherited: no |
| 93 | +Media: visual |
| 94 | +Computed value: see individual properties |
| 95 | +Animatable: no |
| 96 | +Canonical order: <abbr title="follows order of property value definition">per grammar</abbr> |
| 97 | +</pre> |
| 98 | + |
| 99 | +Values have the following meanings: |
| 100 | + |
| 101 | +<dl dfn-for="scroll-boundary-behavior, scroll-boundary-behavior-x, scroll-boundary-behavior-y" dfn-type="value"> |
| 102 | + <dt><dfn>contain</dfn> |
| 103 | + <dd> |
| 104 | + This value indicates that the element must not perform <a>scroll chaining</a> to any ancestor along the scroll chain regardless of whether the scroll originated at this element or one of its descendants. |
| 105 | + <dt><dfn>none</dfn> |
| 106 | + <dd> |
| 107 | + This value implies the same behavior as <a>contain</a> and in addition this element must also not show any overscroll affordances. |
| 108 | + <dt><dfn>auto</dfn> |
| 109 | + <dd> |
| 110 | + This value indicates that the element should perform the usual <a>default action</a> with respect to both <a>scroll chaining</a> and overscroll. |
| 111 | +</dl> |
| 112 | + |
| 113 | +Note: In the case where a user agent does not implement scroll chaining and overscroll affordances, these values will have no side effects for a compliant implementation. |
| 114 | + |
| 115 | +Issue(WICG/scroll-boundary-behavior#6): Right now the specification does not mention programmatic scrolling. How should it be handled? |
0 commit comments