-
Notifications
You must be signed in to change notification settings - Fork 644
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-scroll-snap-2] Drop scroll-start and add issue to :snapped #10505
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -39,12 +39,13 @@ Introduction {#intro} | |
<em>This is currently a delta spec over Scroll Snap 1.</em> | ||
|
||
Scroll experiences don't always start at the beginning. Interactions with | ||
carousels, swipe controls, and listviews often start somewhere in the middle, | ||
and each require JavaScript to set this position on page load. | ||
By enabling CSS to specify this scroll start position, | ||
both users, page authors and browsers benefit. | ||
carousels, swipe controls, and listviews often intend to begin from some element | ||
which might not be positioned at the beginning of the scroll container. | ||
JavaScript is required to make the scroll container initially scrolled | ||
to that element. By enabling CSS to specify that an element should be | ||
initially scrolled to, both users, page authors and browsers benefit. | ||
|
||
In addition to setting an initial scroll position, | ||
In addition to setting an initial scroll target, | ||
developers need insights and events into Scroll Snap. | ||
Events like which element is snapped on which axis, | ||
when the snap event is changing, | ||
|
@@ -70,36 +71,6 @@ First Layout {#first-layout} | |
Motivating Examples {#examples} | ||
=============================== | ||
|
||
<div class="example"> | ||
A carousel that starts in the middle: | ||
|
||
<pre class="lang-css"> | ||
.carousel { | ||
overflow-inline: auto; | ||
scroll-start: center; | ||
} | ||
</pre> | ||
|
||
<pre class="lang-html"> | ||
<div class="carousel"> | ||
<img src="img1.jpg"> | ||
<img src="img2.jpg"> | ||
<img src="img3.jpg"> | ||
<img src="img4.jpg"> | ||
<img src="img5.jpg"> | ||
</div> | ||
</pre> | ||
|
||
<!-- <figure> | ||
<img src="images/element_snap_positions.png" alt=""> | ||
|
||
<figcaption> | ||
The layout of the scroll container’s contents in the example. | ||
The snapport is represented by the red rectangle, and the snap area is represented by the yellow rectangle. Since the scroll-snap-align is “center” in the inline (horizontal) axis, a snap position is established at each scroll position which aligns the X-center of the snapport (represented by a red dotted line) with the X-center of a snap area (represented by a yellow dotted line). | ||
</figcaption> | ||
</figure> --> | ||
</div> | ||
|
||
<div class="example"> | ||
A search bar is available when the user scrolls back to the top: | ||
|
||
|
@@ -137,93 +108,6 @@ Motivating Examples {#examples} | |
Setting Where Scroll Starts {#properties-on-the-scroll-container} | ||
================================================================= | ||
|
||
<!-- BIG TEXT: SCROLL START --> | ||
|
||
The 'scroll-start' property {#scroll-start} | ||
------------------------------------------- | ||
|
||
<pre class="propdef shorthand"> | ||
Name: scroll-start | ||
Value: [ auto | start | end | center | left | right | top | bottom | <<length-percentage [0,∞]>> ]{1,2} | ||
</pre> | ||
|
||
This property is a shorthand property that sets all of the scroll-start-* longhands in one declaration. | ||
The first value defines the scroll starting point in the block axis, | ||
the second sets it in the inline axis. If the second value is omitted, it defaults to ''scroll-start/start''. If ''scroll-start-target'' is set on any child, 'scroll-start' is not used, in favor of using the element as the offset. | ||
|
||
Values are defined as follows: | ||
|
||
<dl dfn-type=value dfn-for="scroll-start, scroll-start-x, scroll-start-y, scroll-start-block, scroll-start-inline"> | ||
<dt><dfn>auto</dfn> | ||
<dd> | ||
... | ||
|
||
<dt><dfn><<length-percentage [0,∞]>></dfn> | ||
<dd> | ||
... | ||
|
||
Negative values are invalid. | ||
Values corresponding to a length greater than the width/height of the scrollport | ||
are valid, | ||
but clamped to the width/height of the scrollport. | ||
|
||
<dt><dfn>start</dfn> | ||
<dt><dfn>center</dfn> | ||
<dt><dfn>end</dfn> | ||
<dd> | ||
Equivalent to ''0%'', ''50%'', and ''100%'', respectively. | ||
</dl> | ||
|
||
<h4 id="display-none-behavior"> | ||
Interaction with ''display: none'' and initial creation</h4> | ||
|
||
Same behavior that animations follow with [[#first-layout]]. | ||
|
||
<h4 id="slow-page-load-behavior"> | ||
Slow page loading or document streaming behavior</h4> | ||
|
||
TODO | ||
|
||
<h4 id="fragment-navigation-behavior"> | ||
Interaction with "fragment navigation"</h4> | ||
|
||
TODO | ||
|
||
If the scrollport has a in-page '':target'' via a URL fragment or a previous scroll position, then 'scroll-start' is unused. Existing target logic should go unchanged. This makes 'scroll-start' a soft request in the scroll position resolution routines. | ||
|
||
<h4 id="place-content-behavior"> | ||
Interaction with 'place-content'</h4> | ||
|
||
TODO | ||
|
||
Note: While 'place-content' can make a scroller appear to start in the center | ||
or end, no browser supports it and it appears complicated to resolve. | ||
|
||
<h4 id="find-in-page-behavior"> | ||
Interaction with "find in page"</h4> | ||
|
||
TODO | ||
|
||
<h4 id="scroll-snap-container-behavior"> | ||
Interaction with "scroll-snap" containers</h4> | ||
|
||
This effectively will layout and start scroll at the snapped child, thus negating / cancelling 'scroll-start'. 'scroll-start' will only work if nothing else has effected the scroll position. | ||
|
||
<h4 id="nested-scrollers"> | ||
Nested scrollers with 'scroll-start'</h4> | ||
|
||
Should follow patterns that scroll snap has set. | ||
|
||
<h4 id="toggling-display-none"> | ||
Interaction when 'display' is toggled</h4> | ||
|
||
Same behavior that animations follow with [[#first-layout]]. | ||
|
||
<h4 id="rtl"> | ||
Interaction with RTL and LTR</h4> | ||
|
||
Logical properties are offered for length offsets that should be flow relative. Furthermore, the ''end'' and ''start'' keywords are always logical. | ||
|
||
The 'scroll-start-target' property {#scroll-start-target} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. scroll-start-target says it is a shorthand but I think that's no longer true since becoming a single property, right? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yes that's correct. Good catch. I've removed the "shorthand" references. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Remnants of There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for pointing this out. Created #10554 to remove them. |
||
------------------------------------------- | ||
|
||
|
@@ -289,7 +173,7 @@ Interaction with 'place-content'</h4> | |
<h4 id="scroll-start-fragment-navigation"> | ||
Post-first layout arrivals</h4> | ||
|
||
While the document is being [[html#updating-the-document|updated], | ||
While the document is being [[html#updating-the-document|updated]], | ||
a <a>scroll container's</a> [=initial scroll target=] might arrive | ||
after that <a>scroll container</a> has been laid out. | ||
If this happens, | ||
|
@@ -313,6 +197,9 @@ Post-first layout arrivals</h4> | |
Styling Snapped Items {#styling-snapped} | ||
============================= | ||
|
||
Issue: The ':snapped' pseudo-class is being dropped in favor of a | ||
<a href="https://drafts.csswg.org/css-contain-4/scroll_state_explainer.html">container state query</a> approach. | ||
|
||
The Snapped-element Pseudo-class: '':snapped'' {#snapped} | ||
------------------------------------------------------- | ||
|
||
|
@@ -650,47 +537,7 @@ when the scrolling operation ends. | |
█████ ███▌ █▌ ▐▌ ███▌ █▌ █▌ █▌ █▌ █▌ ▐▌ ████▌ | ||
--> | ||
|
||
Appendix A: Longhands {#longhands} | ||
================================== | ||
|
||
The physical and logical longhands (and their shorthands) | ||
interact as defined in [[!CSS-LOGICAL-1]]. | ||
|
||
Physical Longhands for 'scroll-start' {#scroll-start-longhands-physical} | ||
---------------------------------------------------------------------- | ||
|
||
<pre class="propdef"> | ||
Name: scroll-start-x, scroll-start-y | ||
Value: auto | start | end | center | <<length-percentage [0,∞]>> | ||
Initial: auto | ||
Applies to: <a>scroll containers</a> | ||
Inherited: no | ||
Logical property group: scroll-start | ||
Percentages: relative to the corresponding axis of the scroll container’s scrollport | ||
Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value | ||
Animation type: by computed value type | ||
</pre> | ||
|
||
... | ||
|
||
Flow-relative Longhands for 'scroll-start' {#scroll-start-longhands-logical} | ||
-------------------------------------------------------------------------- | ||
|
||
<pre class="propdef"> | ||
Name: scroll-start-inline, scroll-start-block | ||
Value: auto | start | end | center | <<length-percentage [0,∞]>> | ||
Initial: auto | ||
Applies to: <a>scroll containers</a> | ||
Inherited: no | ||
Logical property group: scroll-start | ||
Percentages: relative to the corresponding axis of the scroll container’s scrollport | ||
Computed value: the keyword ''scroll-start/auto'' or a computed <<length-percentage>> value | ||
Animation type: by computed value type | ||
</pre> | ||
|
||
... | ||
|
||
Appendix B: Event Handlers {#event-handlers} | ||
Appendix A: Event Handlers {#event-handlers} | ||
============================================================ | ||
|
||
ISSUE: This section should be moved to the HTML event handler | ||
|
@@ -736,9 +583,9 @@ Extensions to the <code>GlobalEventHandlers</code> Interface Mixin {#interface-g | |
Privacy Considerations {#privacy} | ||
====================== | ||
|
||
TODO | ||
The features in this spec have no known privacy implications. | ||
|
||
Security Considerations {#security} | ||
======================= | ||
|
||
TODO | ||
The features in this spec have no known security implications. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this is still a good example, it just requires that we add a class to the middle item in the carousel which sets scroll-start-target. This at least works for the case where the carousel shows one item at a time or when the items are snap center aligned. Can you update the example instead?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good, done.