Skip to content

[css-snappoints] A few minor updates plus clarification of post-content snapping #89

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.

Sign up for GitHub

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

Merged
ChumpChief merged 4 commits into from
Jan 12, 2016
+135 −73
Merged

[css-snappoints] A few minor updates plus clarification of post-content snapping #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2a19902
[css-snappoints] Adding syntax hignlignting classes
ChumpChief Jan 12, 2016
e6b1985
[css-snappoints] Minor typo
ChumpChief Jan 12, 2016
16cbf52
[css-snappoints] Adding text to clarify that the same snap position s…
ChumpChief Jan 12, 2016
c9ced67
[css-snappoints] Update generated html
ChumpChief Jan 12, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 14 additions & 10 deletions css-snappoints/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ Ignored Terms: scroll-snap-positions-*, containing block chain
sizes vary. Using mandatory element-based snap
positions, scrolling will always complete with an image centered in the <a>scroll container's</a> visual viewport.

<pre>
<pre class="lang-css">
img {
/* Specifies that the center of each photo
should align with the center of the scroll
Expand All @@ -83,7 +83,7 @@ Ignored Terms: scroll-snap-positions-*, containing block chain
}
</pre>

<pre>
<pre class="lang-html">
&lt;div class="photoGallery">
&lt;img src="img1.jpg">
&lt;img src="img2.jpg">
Expand All @@ -110,7 +110,7 @@ Ignored Terms: scroll-snap-positions-*, containing block chain
to snap one page at a time). However, if a scrolling operation would finish near a snap position, then the scroll will be adjusted to
align the page as specified.

<pre>
<pre class="lang-css">
.page {
/* Defines the top of each page as the
edge that should be used for snapping */
Expand All @@ -129,7 +129,7 @@ Ignored Terms: scroll-snap-positions-*, containing block chain
}
</pre>

<pre>
<pre class="lang-html">
&lt;div class="docScroller">
&lt;div class="page">Page 1&lt;/div>
&lt;div class="page">Page 2&lt;/div>
Expand Down Expand Up @@ -194,7 +194,7 @@ Ignored Terms: scroll-snap-positions-*, containing block chain

<h2 id="scroll-snap-type">Scroll Snap Types: the 'scroll-snap-type' property</h2>

The ''scroll-snap-type'' property defines how strictly a <a>scroll container's</a> visual viewport should rest on <a>snap positions</a>. It intentionally does not specify nor mandate any precise animations or physics used to enforce those snap position; this is left up to the user agent.
The ''scroll-snap-type'' property defines how strictly a <a>scroll container's</a> visual viewport should rest on <a>snap positions</a>. It intentionally does not specify nor mandate any precise animations or physics used to enforce those snap positions; this is left up to the user agent.

<p class="issue">
<a href="https://lists.w3.org/Archives/Public/www-style/2015Nov/0328.html">Open issue</a> on whether to enhance the scroll-snap-type property for specifying the axis or adding a second property. We have <a href="https://lists.w3.org/Archives/Public/www-style/2015Dec/0048.html">resolved</a> that this functionality be added once the issue is resolved.
Expand All @@ -208,7 +208,7 @@ Ignored Terms: scroll-snap-positions-*, containing block chain
Inherited: no
Percentages: n/a
Media: interactive
Computed value: specified value
Computed value: as specified
Animatable: no
</pre>

Expand All @@ -219,11 +219,15 @@ Ignored Terms: scroll-snap-positions-*, containing block chain

<dt><dfn>mandatory</dfn>
<dd>
The visual viewport of this <a>scroll container</a> is guaranteed to rest on a snap position when there are no active scrolling operations. That is, it must come to rest on a snap position at the termination of a scroll, if a valid, reachable snap position exists. If no valid, reachable snap position exists then no snapping occurs. If the content changes such that the visual viewport would no longer rest on a snap position (e.g. content is added, moved, deleted, resized), the scroll offset must be modified to maintain this guarantee.
The visual viewport of this <a>scroll container</a> is guaranteed to rest on a snap position when there are no active scrolling operations. That is, it must come to rest on a snap position at the termination of a scroll, if a valid, reachable snap position exists. If no valid, reachable snap position exists then no snapping occurs.

If the content changes such that the visual viewport would no longer rest on a snap position (e.g. content is added, moved, deleted, resized), the scroll offset must be modified to maintain alignment of the visual viewport with a snap position. If the visual viewport was already aligned with a snap position prior to the content change and that snap position still exists (e.g. its associated element was not deleted), that same snap position must be satisfied after the content change.

<dt><dfn>proximity</dfn>
<dd>
The visual viewport of this <a>scroll container</a> may come to rest on a snap position at the termination of a scroll at the discretion of the UA given the parameters of the scroll. If the content changes such that the visual viewport would no longer rest on a snap position (e.g. content is added, moved, deleted, resized), the scroll offset may be modified to maintain this guarantee.
The visual viewport of this <a>scroll container</a> may come to rest on a snap position at the termination of a scroll at the discretion of the UA given the parameters of the scroll.

If the content changes such that the visual viewport would no longer rest on a snap position (e.g. content is added, moved, deleted, resized), the scroll offset may be modified to maintain alignment of the visual viewport with a snap position. If the visual viewport was already aligned with a snap position prior to the content change and that snap position still exists (e.g. its associated element was not deleted) and if the user agent elects to modify the scroll offset to maintain snap position alignment, that same snap position should be satisfied after the content change.
</dl>

<h2 id="scroll-snap-padding">Scroll Snap Padding: the 'scroll-snap-padding' property</h2>
Expand All @@ -238,7 +242,7 @@ Ignored Terms: scroll-snap-positions-*, containing block chain
Inherited: no
Percentages: relative to the scroll container's visual viewport
Media: interactive
Computed value: specified value, with lengths made absolute
Computed value: as specified, with lengths made absolute
Animatable: yes
</pre>

Expand All @@ -262,7 +266,7 @@ Ignored Terms: scroll-snap-positions-*, containing block chain
Inherited: no
Percentages: relative to the specified element box
Media: interactive
Computed value: specified value, with lengths made absolute
Computed value: as specified, with lengths made absolute
Animatable: yes
</pre>

Expand Down
Loading