| (function(){ | |
| // Override function in given prototype to add a log statement | |
| function logMethod(prototype, fname) { | |
| if (!(fname in prototype)) { | |
| console.warn("Warning: can't instrument " + prototype.constructor.name + '.' + fname); | |
| return; | |
| } | |
| var original = prototype[fname]; | |
| prototype[fname] = function() { |
| /* jshint esnext: true */ | |
| // A simple experimental poly-fill to create a global flag that controls scroll restoration. | |
| // To use simply set window.history.scrollRestoration to 'manual' or 'auto'. | |
| // Requires Chrome v44 with "--enable-web-experimental-features" flag. | |
| (function(window, console, undefined) { | |
| "use strict"; | |
| var history = window.history; | |
| // History API does not support scroll restoration option |
| // Translate Event.timeStamp to a DOMHighResTimeStamp that can be compare with | |
| // performance.now(). this becomes a no-op for browsers that provide | |
| // high resolution event timestamp. | |
| toHighResTimeStamp = (function(testTimeStamp){ | |
| function timeNear(a, b) { | |
| var d = 1000 * 60 * 5; | |
| return a > b - d && a < b + d; | |
| } | |
| var timebaseDelta_ = 0; |
| // Browsers (and the DOM spec) are in the process of moving the event timestamp | |
| // from being a DOMTimeStamp (mostly relative to Date.now()) to being | |
| // a DOMHighResTimeStamp (always relative to performance.now()). | |
| // A simple polyfill for making Event.timeStamp to always be a | |
| // DOMHighResTimeStamp that can be compared with performance.now(). This becomes | |
| // a no-op for browsers that provide high resolution event timestamp. | |
| // Compatibility: | |
| // At the moment it is IE9+ as it requires: |performance.now| which is IE9+ |
| // Example 1: Fade-in with spring timeing function | |
| registerAnimator('fancyFadin', class { | |
| static handles = { | |
| 'default': Style(['opacity', '--spring-k']); | |
| } | |
| animate(timestamp, handles) { | |
| handles.default.forEach(elem => { | |
| // read a custom css property. |
| animationWorklet.import('twitter-header-animator.js').then( _ => { | |
| var anim = new WorkletAnimation('twitter-header', | |
| [document.timeline, new ScrollingTimeline(scrollingElement, {/* options for timeline */})], | |
| { | |
| targets : { | |
| bar: element1, | |
| avatar: [element2, element3], | |
| }, | |
| timing: { |
| // Finds minimum resolution Δ given a set of samples which are known to be in the form of N*Δ. | |
| function computeGCD(a, b) { | |
| if (!Number.isInteger(a) || !Number.isInteger(b)) { | |
| throw new Error('Parameters in function gcd must be integer numbers'); | |
| } | |
| var r; | |
| while (b != 0) { | |
| r = a % b; |
| border: yes | |
| height: 600 | |
| scrolling: yes | |
| license: mit | |
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.
|Date | Status | Specification | Model | Browsers | Features | Notes | Link|
| 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); |