just only chrome and touch. using overscroll-behavior

nghiepdev · Dec 20, 2017 · 2b815a0 · 2b815a0
1 parent 88bd117
commit 2b815a0
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -1,13 +1,16 @@
 # prevent-pull-refresh
+
 Preventing the pull-to-refresh effect browser on mobile
 
 [![NPM version](https://img.shields.io/npm/v/prevent-pull-refresh.svg)](https://www.npmjs.com/package/prevent-pull-refresh)
 [![NPM monthly download](https://img.shields.io/npm/dm/prevent-pull-refresh.svg)](https://www.npmjs.com/package/prevent-pull-refresh)
 
 ## Document
- https://docs.google.com/document/d/12Ay4s3NWake8Qd6xQeGiYimGJ_gCe0UMDZKwP9Ni4m8
 
- ![pull-refresh](https://lh3.googleusercontent.com/xCQZK2gd3R0pNmTXINDQkS4OXiPQa_I2H2i-W6frt40F17gnAjqpkpCXJeyroDcNzzhYZwHtApBSoNCt5inU1dYmgTSzdTLNBxVNF8GjoQLLdH51RzfNPrgVm21blWkgM_xkQKI=s300)
+https://docs.google.com/document/d/12Ay4s3NWake8Qd6xQeGiYimGJ_gCe0UMDZKwP9Ni4m8
+https://developers.google.com/web/updates/2017/11/overscroll-behavior
+
+![pull-refresh](https://lh3.googleusercontent.com/xCQZK2gd3R0pNmTXINDQkS4OXiPQa_I2H2i-W6frt40F17gnAjqpkpCXJeyroDcNzzhYZwHtApBSoNCt5inU1dYmgTSzdTLNBxVNF8GjoQLLdH51RzfNPrgVm21blWkgM_xkQKI=s300)
 
 ## Installation
 
@@ -18,13 +21,15 @@ $ yarn add prevent-pull-refresh
 ## Usage
 
 ```js
-import 'prevent-pull-refresh'
+import 'prevent-pull-refresh';
 ```
+
 or
 
 ```html
 <script src="//unpkg.com/prevent-pull-refresh"></script>
 ```
 
 ## License
-MIT © [Nghiệp](http://nghiepit.pro)
+
+MIT © [Nghiệp](http://nghiepit.pro)
diff --git a/index.js b/index.js
@@ -1,16 +1,32 @@
 (() => {
+  const isChrome = window.chrome || navigator.userAgent.match('CriOS');
+  const isTouch = 'ontouchstart' in document.documentElement;
+
+  if (!isChrome || !isTouch) {
+    return;
+  }
+
+  let supportsOverscroll = false;
+  let supportsPassive = false;
   let lastTouchY = 0;
   let maybePrevent = false;
-  let supportsPassive = false;
 
   try {
+    if (CSS.supports('overscroll-behavior-y', 'contain')) {
+      supportsOverscroll = true;
+    }
+
     addEventListener('test', null, {
       get passive() {
         supportsPassive = true;
       },
     });
   } catch (e) {}
 
+  if (supportsOverscroll) {
+    return (document.body.style.overscrollBehaviorY = 'contain');
+  }
+
   const setTouchStartPoint = event => {
     lastTouchY = event.touches[0].clientY;
   };

diff --git a/index.min.js b/index.min.js
diff --git a/index.min.js.map b/index.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prevent-pull-refresh",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "Preventing the pull-to-refresh effect browser on mobile",
   "main": "index.min.js",
   "scripts": {
@@ -14,7 +14,7 @@
   },
   "repository": "https://github.com/tronghiep92/prevent-pull-refresh",
   "author": "Nghiệp <[email protected]>",
-  "homepage": "http://nghiepit.pro",
+  "homepage": "https://github.com/tronghiep92/prevent-pull-refresh",
   "keywords": [
     "pull refresh",
     "refresh",