You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Add an example of snapping elements with a slight offset, such that the previous element is allowed to "peek" in from the side.
270
-
</p>
273
+
<divclass=example>
274
+
This example builds a paginated document that aligns each page near to (but not exactly on) the edge of the <adata-link-type=dfnhref=#scroll-containertitle="scroll container">scroll container</a>.
275
+
This allows the previous page to "peek" in from above in order to make the user aware that they are not yet at the top of the document.
276
+
Using proximity snap points instead of mandatory snap points allows the user to stop halfway through a page (rather than forcing them
277
+
to snap one page at a time). However, if a scrolling operation would finish near a snap point, then the scroll will be adjusted to
278
+
align the page as specified.
279
+
280
+
<pre> .page {
281
+
/* Defines the top center of each page as the
282
+
coordinate that should be used for snapping */
283
+
scroll-snap-coordinate: 50% 0;
284
+
}
285
+
.docScroller {
286
+
width: 500px;
287
+
overflow-x: hidden;
288
+
overflow-y: auto;
289
+
/* Denotes that snap points will be defined
290
+
by the elements contained within. */
291
+
scroll-snap-points-y: elements;
292
+
/* Specifies that each element’s snap coordinate should
293
+
align with the center of the scroll container, offset
294
+
a short distance from the top edge. */
295
+
scroll-snap-destination: 50% 100px;
296
+
/* Encourages scrolling to end at a snap point when the
297
+
operation completes, if it is near a snap point */
What happens in zooming scenarios, e.g. if the images become larger than the viewport? Snapping makes less sense in this case. Consider the snap-area stuff below to help solve this.
274
-
</div>
275
-
311
+
<figcaption>
312
+
The layout of the scroll container’s contents in the example.
313
+
The snap-destination is horizontally centered and offset 100px from the top edge with respect to the scroll container
314
+
(represented by a red X),
315
+
and each element has its snap coordinate horizontally centered and top-aligned with respect to the element
What happens in zooming scenarios, e.g. if the images become larger than the viewport? Snapping makes less sense in this case. Is this addressable with a snap-area type of effect?
Add an example of snapping elements with a slight offset, such that the previous element is allowed to "peek" in from the side.
614
-
<ahref=#issue-5c5bf90c> ↵ </a></div>
615
-
616
-
<divclass=issue>
617
-
What happens in zooming scenarios, e.g. if the images become larger than the viewport? Snapping makes less sense in this case. Consider the snap-area stuff below to help solve this.
Could this be defined on a per-snap-point basis? What does it mean to mix types of snap points within a single scroller? Alternatively, should this be definable separately for each axis?
If we do some behavior like snap-area, what happens when near an edge -- try to align with the edge or not?
628
670
<ahref=#issue-bc37a0a2> ↵ </a></div>
629
671
672
+
<divclass=issue>
673
+
What happens in zooming scenarios, e.g. if the images become larger than the viewport? Snapping makes less sense in this case. Is this addressable with a snap-area type of effect?
674
+
<ahref=#issue-fa211d04> ↵ </a></div>
675
+
630
676
<divclass=issue>
631
677
Consider naming conventions like in Grid Layout for grouping properties on the container vs. items.
The layout of the scroll container's contents in the example.
146
-
The snap-destination is horizontally centered within the scroll container
147
-
(represented by a red line),
148
-
and each element has its snap coordinate horizontally centered within the element
149
-
(represented by dashed yellow lines).
150
+
The snap-destination is horizontally and vertically centered within the scroll container
151
+
(represented by a red X),
152
+
and each element has its snap coordinate horizontally and vertically centered within the element
153
+
(represented by yellow plus signs).
150
154
</figcaption>
151
155
</figure>
156
+
</div>
157
+
158
+
<divclass="example">
159
+
This example builds a paginated document that aligns each page near to (but not exactly on) the edge of the <a>scroll container</a>.
160
+
This allows the previous page to "peek" in from above in order to make the user aware that they are not yet at the top of the document.
161
+
Using proximity snap points instead of mandatory snap points allows the user to stop halfway through a page (rather than forcing them
162
+
to snap one page at a time). However, if a scrolling operation would finish near a snap point, then the scroll will be adjusted to
163
+
align the page as specified.
164
+
165
+
<pre>
166
+
.page {
167
+
/* Defines the top center of each page as the
168
+
coordinate that should be used for snapping */
169
+
scroll-snap-coordinate: 50% 0;
170
+
}
171
+
.docScroller {
172
+
width: 500px;
173
+
overflow-x: hidden;
174
+
overflow-y: auto;
175
+
/* Denotes that snap points will be defined
176
+
by the elements contained within. */
177
+
scroll-snap-points-y: elements;
178
+
/* Specifies that each element's snap coordinate should
179
+
align with the center of the scroll container, offset
180
+
a short distance from the top edge. */
181
+
scroll-snap-destination: 50% 100px;
182
+
/* Encourages scrolling to end at a snap point when the
183
+
operation completes, if it is near a snap point */
184
+
scroll-snap-type: proximity;
185
+
}
186
+
</pre>
152
187
153
-
<pclass="issue">
154
-
Add an example of snapping elements with a slight offset, such that the previous element is allowed to "peek" in from the side.
155
-
</p>
188
+
<pre>
189
+
<div class="docScroller">
190
+
<div class="page">Page 1</div>
191
+
<div class="page">Page 2</div>
192
+
<div class="page">Page 3</div>
193
+
<div class="page">Page 4</div>
194
+
</div>
195
+
</pre>
156
196
157
-
<pclass="issue">
158
-
What happens in zooming scenarios, e.g. if the images become larger than the viewport? Snapping makes less sense in this case. Consider the snap-area stuff below to help solve this.
159
-
</div>
197
+
<figure>
198
+
<imgsrc="element_snap_points_offset.png" alt="">
199
+
200
+
<figcaption>
201
+
The layout of the scroll container's contents in the example.
202
+
The snap-destination is horizontally centered and offset 100px from the top edge with respect to the scroll container
203
+
(represented by a red X),
204
+
and each element has its snap coordinate horizontally centered and top-aligned with respect to the element
If we do some behavior like snap-area, what happens when near an edge -- try to align with the edge or not?
210
258
</p>
211
259
260
+
<pclass="issue">
261
+
What happens in zooming scenarios, e.g. if the images become larger than the viewport? Snapping makes less sense in this case. Is this addressable with a snap-area type of effect?
262
+
</p>
263
+
212
264
<pclass="issue">
213
265
Consider naming conventions like in Grid Layout for grouping properties on the container vs. items.
0 commit comments