Creepy Scrolling Sickness Fork

    @@ -1,9 +1,10 @@ /* - * @title groscroll - * @description smooth scrolling by Vanilla; for jQuery.animate() lover + * @title Creepy Scrolling Sickness + * @description extremely smooth scrolling by Vanilla JS/CSS * @include http://* * @include https://* - * @license MIT License https://opensource.org/licenses/MIT + * @contributor noromanba http://let.hatelabo.jp/noromanba/let/hLHVmL_ErMVx + * @license MIT License https://opensource.org/licenses/MIT * @javascript_url */
    @@ -24,38 +25,39 @@ const MAX_SAFE_SIGNED_INT32 = -1 >>> 1; const top = y ? 0 : MAX_SAFE_SIGNED_INT32; - // [^2] options c.f. - // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo - window.scrollTo({ top, left: 0, behavior: 'smooth', }); - // + // [^2] behaviors c.f. + // https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior + // https://caniuse.com/#feat=css-scroll-behavior + //*/ switch-line + 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 + // https://en.wikipedia.org/wiki/Single-precision_floating-point_format // - // classical scrolling to bottom - /* - const Math.max(...[ - document.documentElement.scrollHeight, - document.documentElement.clientHeight, - document.body.scrollHeight, - document.body.clientHeight, - ]); - */ - // - // [2]: scroll* family - // window.scroll() - // https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll - // window.scrollBy() - // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy - // - // new scrolling features - // window.scrollByLines() - // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollByLines - // window.scrollByPages() - // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollByPages + // [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
  • /*
     * @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`
        //      [0x7FFFFFFF, -1 >>> 1, 2 ** (32 - 1) - 1,].every(v => v === 2147483647) === true
        // Firefox Desktop ignoring >Signed INT32
        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
        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
    // https://en.wikipedia.org/wiki/IEEE_754
    // https://en.wikipedia.org/wiki/Single-precision_floating-point_format
    //
    // [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
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。