Creepy Scrolling Sickness

by noromanba 2018-07-25 [2018/07/25 05:45:13]
(Forked from grosscroll by noromanba)

extremely smooth scrolling by Vanilla JS/CSS

• /*
   * @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 LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。