├── .gitignore
├── LICENCE
├── README.md
├── index.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 | /lib
12 |
13 | # misc
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 |
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 |
24 | index.min.js
25 | index.min.js.map
--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017-present Nghiệp
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # prevent-pull-refresh
2 |
3 | Preventing the pull-to-refresh effect browser on mobile
4 |
5 | [](https://www.npmjs.com/package/prevent-pull-refresh)
6 | [](https://www.npmjs.com/package/prevent-pull-refresh)
7 |
8 | ## Document
9 |
10 | https://docs.google.com/document/d/12Ay4s3NWake8Qd6xQeGiYimGJ_gCe0UMDZKwP9Ni4m8
11 | https://developers.google.com/web/updates/2017/11/overscroll-behavior
12 |
13 | 
14 |
15 | ## Installation
16 |
17 | ```sh
18 | $ yarn add prevent-pull-refresh
19 | ```
20 |
21 | ## Usage
22 |
23 | ```js
24 | import 'prevent-pull-refresh';
25 | ```
26 |
27 | or
28 |
29 | ```html
30 |
31 | ```
32 |
33 | ## License
34 |
35 | MIT © [Nghiep](http://nghiepit.dev)
36 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | (function () {
4 | var isChrome = window.chrome || navigator.userAgent.match('CriOS');
5 | var isTouch = 'ontouchstart' in document.documentElement;
6 |
7 | if (!isChrome || !isTouch) {
8 | return;
9 | }
10 |
11 | var supportsOverscroll = false;
12 | var supportsPassive = false;
13 | var lastTouchY = 0;
14 | var maybePrevent = false;
15 |
16 | try {
17 | if (CSS.supports('overscroll-behavior-y', 'contain')) {
18 | supportsOverscroll = true;
19 | }
20 | } catch (e) {}
21 |
22 | if (supportsOverscroll) {
23 | return (document.body.style.overscrollBehaviorY = 'contain');
24 | } else {
25 | var head = document.head || document.body;
26 | var style = document.createElement('style');
27 | var css =
28 | '\n ::-webkit-scrollbar {\n width: 5px;\n }\n ::-webkit-scrollbar-thumb {\n border-radius: 5px;\n background-color: rgba(0, 0, 0, 0.2);\n }\n body {\n -webkit-overflow-scrolling: auto!important;\n }\n ';
29 | style.type = 'text/css';
30 |
31 | if (style.styleSheet) {
32 | style.styleSheet.cssText = css;
33 | } else {
34 | style.appendChild(document.createTextNode(css));
35 | }
36 |
37 | head.appendChild(style);
38 | }
39 |
40 | try {
41 | window.addEventListener('test', null, {
42 | get passive() {
43 | supportsPassive = true;
44 | },
45 | });
46 | } catch (e) {}
47 |
48 | var setTouchStartPoint = function setTouchStartPoint(event) {
49 | lastTouchY = event.touches[0].clientY;
50 | };
51 |
52 | var isScrollingUp = function isScrollingUp(event) {
53 | var touchY = event.touches[0].clientY;
54 | var touchYDelta = touchY - lastTouchY;
55 | lastTouchY = touchY;
56 | return touchYDelta > 0;
57 | };
58 |
59 | var touchstartHandler = function touchstartHandler(event) {
60 | if (event.touches.length !== 1) return;
61 | setTouchStartPoint(event);
62 | maybePrevent = window.pageYOffset === 0;
63 | };
64 |
65 | var touchmoveHandler = function touchmoveHandler(event) {
66 | if (maybePrevent) {
67 | maybePrevent = false;
68 |
69 | if (isScrollingUp(event)) {
70 | return event.preventDefault();
71 | }
72 | }
73 | };
74 |
75 | document.addEventListener(
76 | 'touchstart',
77 | touchstartHandler,
78 | supportsPassive
79 | ? {
80 | passive: true,
81 | }
82 | : false
83 | );
84 | document.addEventListener(
85 | 'touchmove',
86 | touchmoveHandler,
87 | supportsPassive
88 | ? {
89 | passive: false,
90 | }
91 | : false
92 | );
93 | })();
94 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "prevent-pull-refresh",
3 | "version": "1.0.6",
4 | "description": "Preventing the pull-to-refresh effect browser on mobile",
5 | "main": "index.js",
6 | "homepage": "https://github.com/nghiepit/prevent-pull-refresh",
7 | "repository": "https://github.com/nghiepit/prevent-pull-refresh",
8 | "keywords": [
9 | "pull refresh",
10 | "refresh",
11 | "prevent",
12 | "browser",
13 | "chrome",
14 | "mobile",
15 | "scroll",
16 | "overscroll"
17 | ],
18 | "author": "Nghiep ",
19 | "license": "MIT"
20 | }
21 |
--------------------------------------------------------------------------------