Majid Valipour majido

Scroll Snap

A common usecase for scroll snap is carousels, here is a few popular ones:

A brief history of scroll snapping specification and releases by various browsers.

As of August 2018: Edge (IE) and Firefox ship the old deprecated spec, Safari and Chrome (starting from v69) ship the current CR spec.

	// Original example is from https://github.com/w3c/csswg-drafts/issues/4337

	const scroller = document.getElementById("scroller");
	const image = document.getElementById("image");

	const timeline = new ScrollTimeline({
	source: scroller,
	scrollOffsets: [100, 200, 800, 900]
	});
	// timeline progress is devided into 4 steps [0%, 33%, 66%, 100%) which are mapped from [100, 200, 900, 1000]

	// Small bookmarklet to pring CLs from gerrit in Markdown format.
	// Used and tested on https://chromium-review.googlesource.com

	// To make this a bookmarklet put the content below into a
	// bookmark's link field.
	javascript:(function() {
	const cls = getCLs();
	const desc = Array.prototype.map.call(cls, format);
	console.log(desc.join('\n'));
	function format(a) {

	// Chrome inadvertantly shipped scroll-snap-stop in Chrome 69 but the feature was implemented in Chrome v75.
	// This means that the normal css feature detection CSS.supports('scroll-snap-stop: always)' does not work
	// in Chrome between v69 - v75.
	// Below is an alternate way of feature detecting scroll-snap-stop that uses a temporary hidden scroller.

	const scroller = document.createElement('div');
	scroller.style = "opacity:1; position:relative; width: 40px; height: 40px; overflow: scroll; scroll-snap-type: x mandatory;";

	const snap1 = document.createElement('div');
	snap1.style="margin-left: 0px; width: 1px; height: 1px; scroll-snap-align: start; background-color: blue;"

	// Element delegates to worker/worklet

	interface EventDelegate {};
	interface EventTarget {
	void addEventDelegate(DOMString type?, EventDelegate delegate, EventDelegateOptions options?);
	void removeEventDelegate(DOMString type?, EventDelegate delegate);
	};

	dictionary EventDelegateOptions {
	boolean preventDefault = false;

	javascript:(function(){
	var meter = `
	<label style="position:fixed; z-index:10000; top: 0; left: 50%; transform: translateX(-50%); background-color: pink; padding: 5px;">
	Main thread jank (0-500ms): <input id="jankmeter" type="range" min=0 max=500 value=50>
	</label>
	`;

	const d = document.createElement('jank');
	d.innerHTML = meter;
	document.body.appendChild(d);


	class OverflowPropagationElement extends HTMLElement {
	createdCallback() {
	// See design doc for details of these experimental APIs: https://docs.google.com/document/d/1VnvAqeWFG9JFZfgG5evBqrLGDZYRE5w6G5jEDORekPY/edit
	this.distributeScrollIntent = function(scrollIntent) {
	if (scrollIntent.deltaY <= 0) {
	if (this.getComputedValue('overflow-propagation-up') == 'normal') {
	// let children scroll first and then we scroll if any delta remaining
	scrollIntent.distributeToScrollChainDescendant();
	this.applyScrollIntent(scrollState);