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

@@ -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
-//
-// classical scrolling to bottom
-/*
-const Math.max(...[
-    document.documentElement.scrollHeight,
-    document.documentElement.clientHeight,
-    document.body.scrollHeight,
-    document.body.clientHeight,
-]);
-*/
+// https://en.wikipedia.org/wiki/IEEE_754
+// https://en.wikipedia.org/wiki/Single-precision_floating-point_format
 //
-// [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 LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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