Creepy Scrolling Sickness

  • /*
     * @title Creepy Scrolling Sickness
     * @description extremely smooth scrolling by Vanilla JS/CSS
     * @include http://*
     * @include https://*
     * @contributor noromanba   http://let.hatelabo.jp/noromanba/let/hLHVmL_ErMVx
     * @license     MIT License https://opensource.org/licenses/MIT
     * @javascript_url
     */
    
    (() => {
        'use strict';
    
        const y = Math.max(...[
            window.pageYOffset,
            window.scrollY,
            document.documentElement.scrollTop,
        ]);
    
        // [^1] loose/strict scrolling to bottom details c.f.
        // http://let.hatelabo.jp/noromanba/let/hLHUs7CEkec6
        // you don't use `Number.MAX_SAFE_INTEGER`
        // Firefox Desktop ignoring >Signed INT32, use INT32 max value
        //      [0x7FFFFFFF, -1 >>> 1, ~(1 << (32 - 1)), 2 ** (32 - 1) - 1,]
        //          .every(v => v === 2147483647) === true
        const MAX_SAFE_SIGNED_INT32 = -1 >>> 1;
        const top = y ? 0 : MAX_SAFE_SIGNED_INT32;
    
        // [^2] behaviors c.f.
        // https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
        // https://caniuse.com/#feat=css-scroll-behavior
        //*/ switch-line; "//" or "/" to toggle
        document.documentElement.style.scrollBehavior = 'smooth';
        /*/
        {
            const wall = document.head || document.body || document.documentElement;
    
            wall.appendChild(Object.assign(document.createElement('style'), {
                charset: 'utf-8',
                textContent: 'html { scroll-behavior: smooth; }'
            }));
        }
        //*/
        // document.documentElement. and/or scroll*() too
        window.scrollTo({ top, });
    })();
    
    // DEV
    //
    // [1]: Signed INT32
    // specs
    //  https://en.wikipedia.org/wiki/IEEE_754
    //  https://en.wikipedia.org/wiki/Single-precision_floating-point_format
    //   https://en.wikipedia.org/wiki/IEEE_754_revision
    // how to remember 2147483647
    //  https://stackoverflow.com/questions/94591/what-is-the-maximum-value-for-an-int32#45116768
    //   https://i.stack.imgur.com/rCL8f.png
    //  https://stackoverflow.com/questions/94591/what-is-the-maximum-value-for-an-int32#94608
    //
    // [2]: scroll-behavior
    // specs
    //  https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior
    //  https://wicg.github.io/overscroll-behavior/
    // overscroll-behavior
    //  https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
    //  https://caniuse.com/#feat=css-overscroll-behavior
    // overscroll-behavior-x|y
    //  https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x
    //  https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-y
    //
    // easings
    //  https://easings.net
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2018/07/25 05:45:13 - 2018-07-25
  2. 2018/07/23 06:53:06 - 2018-07-23
  3. 2018/07/23 06:51:46 - 2018-07-23