├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .sassrc ├── LICENSE ├── README.md ├── coverage ├── badge-branches.svg ├── badge-functions.svg ├── badge-lines.svg ├── badge-statements.svg ├── coverage-summary.json ├── lcov-report │ ├── base.css │ ├── block-navigation.js │ ├── detect-scroll │ │ ├── index.html │ │ ├── index.js.html │ │ └── src │ │ │ ├── events.js.html │ │ │ ├── getElement.js.html │ │ │ └── index.html │ ├── events.js.html │ ├── favicon.png │ ├── getElement.js.html │ ├── index.html │ ├── index.js.html │ ├── matchMedia.mock.html │ ├── prettify.css │ ├── prettify.js │ ├── sort-arrow-sprite.png │ └── sorter.js └── lcov.info ├── dist ├── app.c328ef1a.js ├── app.c328ef1a.js.map ├── example.80ee2152.css ├── example.80ee2152.css.map ├── example.80ee2152.js ├── example.80ee2152.js.map └── index.html ├── docs ├── app.000403a2.js ├── app.000403a2.js.map ├── app.119c5f7d.js ├── app.119c5f7d.js.map ├── app.207ad8d9.js ├── app.207ad8d9.js.map ├── app.3dc21311.js ├── app.3dc21311.js.map ├── app.44da1199.js ├── app.44da1199.js.map ├── app.5cb3694b.js ├── app.5cb3694b.js.map ├── app.620c149e.js ├── app.620c149e.js.map ├── app.8e64bb2a.js ├── app.8e64bb2a.js.map ├── app.9c0cc36f.js ├── app.9c0cc36f.js.map ├── app.a955beda.js ├── app.a955beda.js.map ├── app.aa69ba76.js ├── app.aa69ba76.js.map ├── app.bac1efa4.js ├── app.bac1efa4.js.map ├── app.cea24b00.js ├── app.cea24b00.js.map ├── app.e855628a.js ├── app.e855628a.js.map ├── example.e3a7210b.css ├── example.e3a7210b.css.map ├── example.fd9e1284.css ├── example.fd9e1284.css.map └── index.html ├── example ├── _test.gif ├── app.js ├── index.html ├── index.scss └── src │ ├── UpdateDirection.js │ └── UpdateState.js ├── index.js ├── package-lock.json ├── package.json └── src ├── events.js ├── events.test.js ├── getElement.js └── getElement.test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "env": { 4 | "test": { 5 | "presets": ["@babel/preset-env"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | parserOptions: { 7 | ecmaVersion: 12, 8 | sourceType: "module", 9 | }, 10 | extends: [ 11 | "airbnb-base", 12 | "prettier", 13 | "prettier/vue", 14 | "plugin:prettier/recommended", 15 | ], 16 | plugins: ["prettier"], 17 | // add your custom rules here 18 | rules: {}, 19 | }; 20 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib/api.js 3 | lib/index.html 4 | .DS_Store 5 | **/.DS_Store 6 | .vscode 7 | .cache 8 | test/dist 9 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | README.md -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "arrowParens": "always", 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /.sassrc: -------------------------------------------------------------------------------- 1 | { 2 | "includePaths": ["node_modules"] 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Jordan Egstad 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Detect Scroll 📜️ 🔍️ 👀️ 2 | 3 | > A performant and lightweight (~1.6kb) ES6 module for detecting scroll activity (direction + location) for X and/or Y axis 4 | 5 | [![Coverage:statements](./coverage/badge-statements.svg)](#) 6 | [![Coverage:functions](./coverage/badge-functions.svg)](#) 7 | [![Coverage:lines](./coverage/badge-lines.svg)](#) 8 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 9 | 10 | ## Introduction 11 | 12 | The default scroll event listener is amazing and all, but isn't exactly the most usable tool out of the box. It's all, _"Hey look, a user scrolled!"_. And I'm like _"Great! But like, in what direction and where did they stop?"_. And then it's all like, _"IDFK, how about you do some math and figure it out"_. 13 | 14 | In short, this little library adds a handful of helpful [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events)'s which make scroll detection a little more insightful. 15 | 16 | > ### [View Example](https://egstad-construct.github.io/detect-scroll/) 17 | > Note: Open your console to preview debug mode 18 | 19 | --- 20 | 21 | ## Installation 22 | 23 | ```js 24 | npm install @egstad/detect-scroll 25 | ``` 26 | 27 | ## Usage 28 | 29 | ### Example One 30 | 31 | 1. Install and import `detectScroll`. 32 | 2. Select an individual `element` you'd like to monitor the scroll activity of. Can be a string selector (ie: `'.scroll-container'`), or any valid `HTMLElement`. In our case, we'll use the `window`. 33 | 3. Register the [Event](#Events) listeners that you'd like to use. Any events that are not explicitly defined will not fire. 34 | 4. If/when you want to destroy the instance, running `destroy()` will remove all event listeners. 35 | 36 | ```js 37 | import detectScroll from '@egstad/detect-scroll' 38 | 39 | // setup instance & events 40 | const instance = new detectScroll(window, { 41 | events: { 42 | scrollUp: foo(), 43 | scrollDown: bar(), 44 | }, 45 | }) 46 | 47 | // if/when you want to destroy the instance and events 48 | instance.destroy() 49 | ``` 50 | 51 | ### Example Two 52 | 53 | Another way to get up and running with this library is to handle the events yourself. This option registers and dispatches all [Events](#Events), but you'll have to add/remove the event listeners yourself. 54 | 55 | ```js 56 | import detectScroll from '@egstad/detect-scroll' 57 | 58 | // setup instance 59 | const instance = new detectScroll(window) 60 | 61 | // setup events 62 | window.addEventListener('scrollUp', foo) 63 | window.addEventListener('scrollDown', bar) 64 | 65 | // if/when you want to destroy all events 66 | window.removeEventListener('scrollUp', foo) 67 | window.removeEventListener('scrollDown', bar) 68 | ``` 69 | 70 | ## Default Configuration 71 | 72 | ```js 73 | const instance = new detectScroll(window, { 74 | vertical: true, 75 | horizontal: true, 76 | passiveMode: true, 77 | debugMode: false, 78 | events: undefined, 79 | }) 80 | ``` 81 | 82 | ## Properties & Events worth knowing about 83 | 84 | ### Optional Properties 85 | 86 | | Optional Properties | Default Value | Description | 87 | | ------------------- | ------------- | --------------------------------------------- | 88 | | `vertical` | `true` | Registers & Dispatches y-axis activity | 89 | | `horizontal` | `true` | Registers & Dispatches x-axis activity | 90 | | `passiveMode` | `true` | Determines if scroll event is passive or not | 91 | | `debugMode` | `false` | Logs events in console as they dispatch | 92 | | `events` | `undefined` | Event overrides (see Events section for more) | 93 | 94 | ### Events 95 | 96 | Scroll events are dispatched using [`CustomEvent`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent)'s. Here's a gorgeous list of all 10. 97 | 98 | If you would like to a specific selection of them, check out [this example](#Example-One). 99 | 100 | | Custom Event Name | Description | 101 | | ----------------- | ------------------------------------------------------ | 102 | | `scrollStart` | Fired when scrolling begins | 103 | | `scrollStop` | Fired when scrolling ends | 104 | | `scrollX` | Fired every time x position updates | 105 | | `scrollY` | Fired every time y position updates | 106 | | `scrollUp` | Fired when scrolling up | 107 | | `scrollDown` | Fired when scrolling down | 108 | | `scrollLeft` | Fired when scrolling left | 109 | | `scrollRight` | Fired when scrolling right | 110 | | `scrollMinX` | Fired when the left-most part of el/window is reached | 111 | | `scrollMaxX` | Fired when the right-most part of el/window is reached | 112 | | `scrollMinY` | Fired when top of element/window is reached | 113 | | `scrollMaxY` | Fired when bottom of element/window is reached | 114 | 115 | #### Event Template 116 | 117 | ```js 118 | const foo = (ev) => { 119 | console.log(ev.type) 120 | } 121 | 122 | const instance = new detectScroll(window, { 123 | events: { 124 | // exclude any of these and the event's won't be registered or fired 125 | scrollStart: foo, 126 | scrollStop: foo, 127 | scrollX: foo, 128 | scrollY: foo, 129 | scrollUp: foo, 130 | scrollDown: foo, 131 | scrollLeft: foo, 132 | scrollRight: foo, 133 | scrollMinX: foo, 134 | scrollMaxX: foo, 135 | scrollMinY: foo, 136 | scrollMaxY: foo, 137 | }, 138 | }) 139 | ``` 140 | -------------------------------------------------------------------------------- /coverage/badge-branches.svg: -------------------------------------------------------------------------------- 1 | Coverage:branches: 84.38%Coverage:branches84.38% -------------------------------------------------------------------------------- /coverage/badge-functions.svg: -------------------------------------------------------------------------------- 1 | Coverage:functions: 100%Coverage:functions100% -------------------------------------------------------------------------------- /coverage/badge-lines.svg: -------------------------------------------------------------------------------- 1 | Coverage:lines: 100%Coverage:lines100% -------------------------------------------------------------------------------- /coverage/badge-statements.svg: -------------------------------------------------------------------------------- 1 | Coverage:statements: 100%Coverage:statements100% -------------------------------------------------------------------------------- /coverage/coverage-summary.json: -------------------------------------------------------------------------------- 1 | {"total": {"lines":{"total":24,"covered":24,"skipped":0,"pct":100},"statements":{"total":24,"covered":24,"skipped":0,"pct":100},"functions":{"total":8,"covered":8,"skipped":0,"pct":100},"branches":{"total":32,"covered":27,"skipped":0,"pct":84.38}} 2 | ,"/Users/egstad/Sites/construct/detect-scroll/src/events.js": {"lines":{"total":17,"covered":17,"skipped":0,"pct":100},"functions":{"total":6,"covered":6,"skipped":0,"pct":100},"statements":{"total":17,"covered":17,"skipped":0,"pct":100},"branches":{"total":19,"covered":16,"skipped":0,"pct":84.21}} 3 | ,"/Users/egstad/Sites/construct/detect-scroll/src/getElement.js": {"lines":{"total":7,"covered":7,"skipped":0,"pct":100},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":7,"covered":7,"skipped":0,"pct":100},"branches":{"total":13,"covered":11,"skipped":0,"pct":84.62}} 4 | } 5 | -------------------------------------------------------------------------------- /coverage/lcov-report/base.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin:0; padding: 0; 3 | height: 100%; 4 | } 5 | body { 6 | font-family: Helvetica Neue, Helvetica, Arial; 7 | font-size: 14px; 8 | color:#333; 9 | } 10 | .small { font-size: 12px; } 11 | *, *:after, *:before { 12 | -webkit-box-sizing:border-box; 13 | -moz-box-sizing:border-box; 14 | box-sizing:border-box; 15 | } 16 | h1 { font-size: 20px; margin: 0;} 17 | h2 { font-size: 14px; } 18 | pre { 19 | font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace; 20 | margin: 0; 21 | padding: 0; 22 | -moz-tab-size: 2; 23 | -o-tab-size: 2; 24 | tab-size: 2; 25 | } 26 | a { color:#0074D9; text-decoration:none; } 27 | a:hover { text-decoration:underline; } 28 | .strong { font-weight: bold; } 29 | .space-top1 { padding: 10px 0 0 0; } 30 | .pad2y { padding: 20px 0; } 31 | .pad1y { padding: 10px 0; } 32 | .pad2x { padding: 0 20px; } 33 | .pad2 { padding: 20px; } 34 | .pad1 { padding: 10px; } 35 | .space-left2 { padding-left:55px; } 36 | .space-right2 { padding-right:20px; } 37 | .center { text-align:center; } 38 | .clearfix { display:block; } 39 | .clearfix:after { 40 | content:''; 41 | display:block; 42 | height:0; 43 | clear:both; 44 | visibility:hidden; 45 | } 46 | .fl { float: left; } 47 | @media only screen and (max-width:640px) { 48 | .col3 { width:100%; max-width:100%; } 49 | .hide-mobile { display:none!important; } 50 | } 51 | 52 | .quiet { 53 | color: #7f7f7f; 54 | color: rgba(0,0,0,0.5); 55 | } 56 | .quiet a { opacity: 0.7; } 57 | 58 | .fraction { 59 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 60 | font-size: 10px; 61 | color: #555; 62 | background: #E8E8E8; 63 | padding: 4px 5px; 64 | border-radius: 3px; 65 | vertical-align: middle; 66 | } 67 | 68 | div.path a:link, div.path a:visited { color: #333; } 69 | table.coverage { 70 | border-collapse: collapse; 71 | margin: 10px 0 0 0; 72 | padding: 0; 73 | } 74 | 75 | table.coverage td { 76 | margin: 0; 77 | padding: 0; 78 | vertical-align: top; 79 | } 80 | table.coverage td.line-count { 81 | text-align: right; 82 | padding: 0 5px 0 20px; 83 | } 84 | table.coverage td.line-coverage { 85 | text-align: right; 86 | padding-right: 10px; 87 | min-width:20px; 88 | } 89 | 90 | table.coverage td span.cline-any { 91 | display: inline-block; 92 | padding: 0 5px; 93 | width: 100%; 94 | } 95 | .missing-if-branch { 96 | display: inline-block; 97 | margin-right: 5px; 98 | border-radius: 3px; 99 | position: relative; 100 | padding: 0 4px; 101 | background: #333; 102 | color: yellow; 103 | } 104 | 105 | .skip-if-branch { 106 | display: none; 107 | margin-right: 10px; 108 | position: relative; 109 | padding: 0 4px; 110 | background: #ccc; 111 | color: white; 112 | } 113 | .missing-if-branch .typ, .skip-if-branch .typ { 114 | color: inherit !important; 115 | } 116 | .coverage-summary { 117 | border-collapse: collapse; 118 | width: 100%; 119 | } 120 | .coverage-summary tr { border-bottom: 1px solid #bbb; } 121 | .keyline-all { border: 1px solid #ddd; } 122 | .coverage-summary td, .coverage-summary th { padding: 10px; } 123 | .coverage-summary tbody { border: 1px solid #bbb; } 124 | .coverage-summary td { border-right: 1px solid #bbb; } 125 | .coverage-summary td:last-child { border-right: none; } 126 | .coverage-summary th { 127 | text-align: left; 128 | font-weight: normal; 129 | white-space: nowrap; 130 | } 131 | .coverage-summary th.file { border-right: none !important; } 132 | .coverage-summary th.pct { } 133 | .coverage-summary th.pic, 134 | .coverage-summary th.abs, 135 | .coverage-summary td.pct, 136 | .coverage-summary td.abs { text-align: right; } 137 | .coverage-summary td.file { white-space: nowrap; } 138 | .coverage-summary td.pic { min-width: 120px !important; } 139 | .coverage-summary tfoot td { } 140 | 141 | .coverage-summary .sorter { 142 | height: 10px; 143 | width: 7px; 144 | display: inline-block; 145 | margin-left: 0.5em; 146 | background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent; 147 | } 148 | .coverage-summary .sorted .sorter { 149 | background-position: 0 -20px; 150 | } 151 | .coverage-summary .sorted-desc .sorter { 152 | background-position: 0 -10px; 153 | } 154 | .status-line { height: 10px; } 155 | /* yellow */ 156 | .cbranch-no { background: yellow !important; color: #111; } 157 | /* dark red */ 158 | .red.solid, .status-line.low, .low .cover-fill { background:#C21F39 } 159 | .low .chart { border:1px solid #C21F39 } 160 | .highlighted, 161 | .highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{ 162 | background: #C21F39 !important; 163 | } 164 | /* medium red */ 165 | .cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE } 166 | /* light red */ 167 | .low, .cline-no { background:#FCE1E5 } 168 | /* light green */ 169 | .high, .cline-yes { background:rgb(230,245,208) } 170 | /* medium green */ 171 | .cstat-yes { background:rgb(161,215,106) } 172 | /* dark green */ 173 | .status-line.high, .high .cover-fill { background:rgb(77,146,33) } 174 | .high .chart { border:1px solid rgb(77,146,33) } 175 | /* dark yellow (gold) */ 176 | .status-line.medium, .medium .cover-fill { background: #f9cd0b; } 177 | .medium .chart { border:1px solid #f9cd0b; } 178 | /* light yellow */ 179 | .medium { background: #fff4c2; } 180 | 181 | .cstat-skip { background: #ddd; color: #111; } 182 | .fstat-skip { background: #ddd; color: #111 !important; } 183 | .cbranch-skip { background: #ddd !important; color: #111; } 184 | 185 | span.cline-neutral { background: #eaeaea; } 186 | 187 | .coverage-summary td.empty { 188 | opacity: .5; 189 | padding-top: 4px; 190 | padding-bottom: 4px; 191 | line-height: 1; 192 | color: #888; 193 | } 194 | 195 | .cover-fill, .cover-empty { 196 | display:inline-block; 197 | height: 12px; 198 | } 199 | .chart { 200 | line-height: 0; 201 | } 202 | .cover-empty { 203 | background: white; 204 | } 205 | .cover-full { 206 | border-right: none !important; 207 | } 208 | pre.prettyprint { 209 | border: none !important; 210 | padding: 0 !important; 211 | margin: 0 !important; 212 | } 213 | .com { color: #999 !important; } 214 | .ignore-none { color: #999; font-weight: normal; } 215 | 216 | .wrapper { 217 | min-height: 100%; 218 | height: auto !important; 219 | height: 100%; 220 | margin: 0 auto -48px; 221 | } 222 | .footer, .push { 223 | height: 48px; 224 | } 225 | -------------------------------------------------------------------------------- /coverage/lcov-report/block-navigation.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var jumpToCode = (function init() { 3 | // Classes of code we would like to highlight in the file view 4 | var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no']; 5 | 6 | // Elements to highlight in the file listing view 7 | var fileListingElements = ['td.pct.low']; 8 | 9 | // We don't want to select elements that are direct descendants of another match 10 | var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > ` 11 | 12 | // Selecter that finds elements on the page to which we can jump 13 | var selector = 14 | fileListingElements.join(', ') + 15 | ', ' + 16 | notSelector + 17 | missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b` 18 | 19 | // The NodeList of matching elements 20 | var missingCoverageElements = document.querySelectorAll(selector); 21 | 22 | var currentIndex; 23 | 24 | function toggleClass(index) { 25 | missingCoverageElements 26 | .item(currentIndex) 27 | .classList.remove('highlighted'); 28 | missingCoverageElements.item(index).classList.add('highlighted'); 29 | } 30 | 31 | function makeCurrent(index) { 32 | toggleClass(index); 33 | currentIndex = index; 34 | missingCoverageElements.item(index).scrollIntoView({ 35 | behavior: 'smooth', 36 | block: 'center', 37 | inline: 'center' 38 | }); 39 | } 40 | 41 | function goToPrevious() { 42 | var nextIndex = 0; 43 | if (typeof currentIndex !== 'number' || currentIndex === 0) { 44 | nextIndex = missingCoverageElements.length - 1; 45 | } else if (missingCoverageElements.length > 1) { 46 | nextIndex = currentIndex - 1; 47 | } 48 | 49 | makeCurrent(nextIndex); 50 | } 51 | 52 | function goToNext() { 53 | var nextIndex = 0; 54 | 55 | if ( 56 | typeof currentIndex === 'number' && 57 | currentIndex < missingCoverageElements.length - 1 58 | ) { 59 | nextIndex = currentIndex + 1; 60 | } 61 | 62 | makeCurrent(nextIndex); 63 | } 64 | 65 | return function jump(event) { 66 | switch (event.which) { 67 | case 78: // n 68 | case 74: // j 69 | goToNext(); 70 | break; 71 | case 66: // b 72 | case 75: // k 73 | case 80: // p 74 | goToPrevious(); 75 | break; 76 | } 77 | }; 78 | })(); 79 | window.addEventListener('keydown', jumpToCode); 80 | -------------------------------------------------------------------------------- /coverage/lcov-report/detect-scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Code coverage report for detect-scroll 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 |
17 |
18 |

19 | All files detect-scroll 20 |

21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
FileStatementsBranchesFunctionsLines
index.js
%/%/%/%/
56 |
57 |
58 |
59 | Code coverage 60 | generated by istanbul at Thu Jun 03 2021 16:52:51 GMT-0700 (Pacific Daylight Time) 61 |
62 | 63 | 64 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /coverage/lcov-report/detect-scroll/src/events.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Code coverage report for detect-scroll/src/events.js 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 |
17 |
18 |

19 | All files / detect-scroll/src events.js 20 |

21 |
22 |
23 |
24 |
25 | 

 26 | 
186 | 
1
 27 | 2
 28 | 3
 29 | 4
 30 | 5
 31 | 6
 32 | 7
 33 | 8
 34 | 9
 35 | 10
 36 | 11
 37 | 12
 38 | 13
 39 | 14
 40 | 15
 41 | 16
 42 | 17
 43 | 18
 44 | 19
 45 | 20
 46 | 21
 47 | 22
 48 | 23
 49 | 24
 50 | 25
 51 | 26
 52 | 27
 53 | 28
 54 | 29
 55 | 30
 56 | 31
 57 | 32
 58 | 33
 59 | 34
 60 | 35
 61 | 36
 62 | 37
 63 | 38
 64 | 39
 65 | 40
 66 | 41
 67 | 42
 68 | 43
 69 | 44
 70 | 45
 71 | 46
 72 | 47
 73 | 48
 74 | 49
 75 | 50
 76 | 51
 77 | 52
 78 | 53
 79 | 542x
 80 | 2x
 81 | 2x
 82 |  
 83 |  
 84 |  
 85 |  
 86 |  
 87 |  
 88 |  
 89 |  
 90 | 5x
 91 | 2x
 92 |  
 93 |  
 94 | 3x
 95 |  
 96 |  
 97 |  
 98 |  
 99 | 3x
100 |  
101 |  
102 |  
103 |  
104 |  
105 |  
106 |  
107 |  
108 | 5x
109 | 2x
110 | 2x
111 | 2x
112 |  
113 |  
114 |  
115 |  
116 |  
117 | 1x
118 |  
119 |  
120 |  
121 |  
122 |  
123 |  
124 |  
125 |  
126 | 8x
127 |  
128 |  
129 |  
130 |  
131 |  
132 |  
const eventsDefault = ['scrollStart', 'scrollStop']
133 | const eventsVertical = ['scrollUp', 'scrollDown', 'scrollMinY', 'scrollMaxY']
134 | const eventsHorizontal = [
135 |   'scrollLeft',
136 |   'scrollRight',
137 |   'scrollMinX',
138 |   'scrollMaxX',
139 | ]
140 |  
141 | export function eventsSetup(eventOverrides, isVertical, isHorizontal) {
142 |   // if overrides exist
143 |   if (eventOverrides && typeOf(eventOverrides)) {
144 |     return eventOverrides
145 |   }
146 |   // if overrides are an invalid format
147 |   else Iif (eventOverrides && !typeOf(eventOverrides)) {
148 |     console.error(`Whoops! 'events' must be an object with at least one prop.`)
149 |   }
150 |   // defaults
151 |   else {
152 |     return [
153 |       ...eventsDefault,
154 |       ...(isVertical ? eventsVertical : []),
155 |       ...(isHorizontal ? eventsHorizontal : []),
156 |     ]
157 |   }
158 | }
159 |  
160 | export function eventsInit(element, events) {
161 |   if (typeOf(events)) {
162 |     Object.entries(events).forEach((event) => {
163 |       const [key, value] = event
164 |       element.addEventListener(key, value, false)
165 |     })
166 |   }
167 | }
168 |  
169 | export function eventsDestroy(element, events) {
170 |   Iif (typeOf(events)) {
171 |     Object.entries(events).forEach((event) => {
172 |       const [key, value] = event
173 |       element.removeEventListener(key, value, false)
174 |     })
175 |   }
176 | }
177 |  
178 | function typeOf(events) {
179 |   return (
180 |     typeof events === 'object' &&
181 |     Object.keys(events).length > 0 &&
182 |     !Array.isArray(events)
183 |   )
184 | }
185 |  
187 |
188 |
189 |
190 | Code coverage 191 | generated by istanbul at Thu Jun 03 2021 16:52:51 GMT-0700 (Pacific Daylight Time) 192 |
193 | 194 | 195 | 202 | 203 | 204 | 205 | -------------------------------------------------------------------------------- /coverage/lcov-report/detect-scroll/src/getElement.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Code coverage report for detect-scroll/src/getElement.js 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 |
17 |
18 |

19 | All files / detect-scroll/src getElement.js 20 |

21 |
22 |
23 |
24 |
25 | 

 26 | 
 93 | 
1
 27 | 2
 28 | 3
 29 | 4
 30 | 5
 31 | 6
 32 | 7
 33 | 8
 34 | 9
 35 | 10
 36 | 11
 37 | 12
 38 | 13
 39 | 14
 40 | 15
 41 | 16
 42 | 17
 43 | 18
 44 | 19
 45 | 20
 46 | 21
 47 | 22
 48 | 23 
 49 | 9x
 50 |  
 51 | 9x
 52 | 8x
 53 | 1x
 54 | 1x
 55 |  
 56 |  
 57 | 9x
 58 |  
 59 |  
 60 |  
 61 |  
 62 | 9x
 63 |  
 64 |  
 65 |  
 66 |  
 67 |  
 68 |  
 69 |  
 70 |  
export function getEl(el) {
 71 |   let element = null
 72 |  
 73 |   if (isElement(el) || el === window) {
 74 |     element = el
 75 |   } else Eif (typeof el === 'string') {
 76 |     element = document.querySelector(el)
 77 |   }
 78 |  
 79 |   return element
 80 | }
 81 |  
 82 | // Returns true if it is a DOM element
 83 | function isElement(o) {
 84 |   return typeof HTMLElement === 'object'
 85 |     ? o instanceof HTMLElement
 86 |     : o &&
 87 |         typeof o === 'object' &&
 88 |         o !== null &&
 89 |         o.nodeType === 1 &&
 90 |         typeof o.nodeName === 'string'
 91 | }
 92 |  
94 |
95 |
96 |
97 | Code coverage 98 | generated by istanbul at Thu Jun 03 2021 16:52:51 GMT-0700 (Pacific Daylight Time) 99 |
100 | 101 | 102 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /coverage/lcov-report/detect-scroll/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Code coverage report for detect-scroll/src 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 |
17 |
18 |

19 | All files detect-scroll/src 20 |

21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 |
FileStatementsBranchesFunctionsLines
events.js
%/%/%/%/
getElement.js
%/%/%/%/
69 |
70 |
71 |
72 | Code coverage 73 | generated by istanbul at Thu Jun 03 2021 16:52:51 GMT-0700 (Pacific Daylight Time) 74 |
75 | 76 | 77 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /coverage/lcov-report/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad-construct/detect-scroll/72cfe564683cc2c8f2e3498f6345e99fa22835c9/coverage/lcov-report/favicon.png -------------------------------------------------------------------------------- /coverage/lcov-report/getElement.js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for getElement.js 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |
21 |
22 |

All files getElement.js

23 |
24 | 25 |
26 | 100% 27 | Statements 28 | 7/7 29 |
30 | 31 | 32 |
33 | 84.62% 34 | Branches 35 | 11/13 36 |
37 | 38 | 39 |
40 | 100% 41 | Functions 42 | 2/2 43 |
44 | 45 | 46 |
47 | 100% 48 | Lines 49 | 7/7 50 |
51 | 52 | 53 |
54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |
58 |
59 | 

 60 | 
1
 61 | 2
 62 | 3
 63 | 4
 64 | 5
 65 | 6
 66 | 7
 67 | 8
 68 | 9
 69 | 10
 70 | 11
 71 | 12
 72 | 13
 73 | 14
 74 | 15
 75 | 16
 76 | 17
 77 | 18
 78 | 19
 79 | 20
 80 | 21
 81 | 22
 82 | 23 
 83 | 7x
 84 |  
 85 | 7x
 86 | 6x
 87 | 1x
 88 | 1x
 89 |  
 90 |  
 91 | 7x
 92 |  
 93 |  
 94 |  
 95 |  
 96 | 7x
 97 |  
 98 |  
 99 |  
100 |  
101 |  
102 |  
103 |  
104 |  
export function getEl(el) {
105 |   let element = null
106 |  
107 |   if (isElement(el) || el === window) {
108 |     element = el
109 |   } else Eif (typeof el === 'string') {
110 |     element = document.querySelector(el)
111 |   }
112 |  
113 |   return element
114 | }
115 |  
116 | // Returns true if it is a DOM element
117 | function isElement(o) {
118 |   return typeof HTMLElement === 'object'
119 |     ? o instanceof HTMLElement
120 |     : o &&
121 |         typeof o === 'object' &&
122 |         o !== null &&
123 |         o.nodeType === 1 &&
124 |         typeof o.nodeName === 'string'
125 | }
126 |  
127 | 128 |
129 |
130 |
131 | Code coverage generated by 132 | istanbul 133 | at Thu Nov 02 2023 20:19:10 GMT-0500 (Central Daylight Time) 134 |
135 | 136 | 137 | 142 | 143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /coverage/lcov-report/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Code coverage report for All files 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 |
21 |
22 |

All files

23 |
24 | 25 |
26 | 100% 27 | Statements 28 | 24/24 29 |
30 | 31 | 32 |
33 | 84.38% 34 | Branches 35 | 27/32 36 |
37 | 38 | 39 |
40 | 100% 41 | Functions 42 | 8/8 43 |
44 | 45 | 46 |
47 | 100% 48 | Lines 49 | 24/24 50 |
51 | 52 | 53 |
54 |

55 | Press n or j to go to the next uncovered block, b, p or k for the previous block. 56 |

57 |
58 |
59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 |
FileStatementsBranchesFunctionsLines
events.js 78 |
79 | 		100%17/1784.21%16/19100%6/6100%17/17
getElement.js 93 |
94 | 		100%7/784.62%11/13100%2/2100%7/7
107 |
108 |
109 |
110 |
111 | Code coverage generated by 112 | istanbul 113 | at Thu Nov 02 2023 20:19:10 GMT-0500 (Central Daylight Time) 114 |
115 | 116 | 117 | 122 | 123 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /coverage/lcov-report/matchMedia.mock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Code coverage report for matchMedia.mock 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 |
17 |
18 |

19 | All files matchMedia.mock 20 |

21 |
22 |
23 |
24 |
25 | 

26 | 
57 | 
1
27 | 2
28 | 3
29 | 4
30 | 5
31 | 6
32 | 7
33 | 8
34 | 9
35 | 10
36 | 111x
37 |  
38 |  
39 |  
40 |  
41 |  
42 |  
43 |  
44 |  
45 |  
46 |  
Object.defineProperty(window, 'matchMedia', {
47 |   writable: true,
48 |   value: jest.fn().mockImplementation(query => ({
49 |     matches: 'dark',
50 |     media: query,
51 |     onchange: null,
52 |     addEventListener: jest.fn(),
53 |     removeEventListener: jest.fn(),
54 |     dispatchEvent: jest.fn(),
55 |   })),
56 | });
58 |
59 |
60 |
61 | Code coverage 62 | generated by istanbul at Tue Jun 01 2021 21:36:40 GMT-0700 (Pacific Daylight Time) 63 |
64 | 65 | 66 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /coverage/lcov-report/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} 2 | -------------------------------------------------------------------------------- /coverage/lcov-report/sort-arrow-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad-construct/detect-scroll/72cfe564683cc2c8f2e3498f6345e99fa22835c9/coverage/lcov-report/sort-arrow-sprite.png -------------------------------------------------------------------------------- /coverage/lcov-report/sorter.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var addSorting = (function() { 3 | 'use strict'; 4 | var cols, 5 | currentSort = { 6 | index: 0, 7 | desc: false 8 | }; 9 | 10 | // returns the summary table element 11 | function getTable() { 12 | return document.querySelector('.coverage-summary'); 13 | } 14 | // returns the thead element of the summary table 15 | function getTableHeader() { 16 | return getTable().querySelector('thead tr'); 17 | } 18 | // returns the tbody element of the summary table 19 | function getTableBody() { 20 | return getTable().querySelector('tbody'); 21 | } 22 | // returns the th element for nth column 23 | function getNthColumn(n) { 24 | return getTableHeader().querySelectorAll('th')[n]; 25 | } 26 | 27 | // loads all columns 28 | function loadColumns() { 29 | var colNodes = getTableHeader().querySelectorAll('th'), 30 | colNode, 31 | cols = [], 32 | col, 33 | i; 34 | 35 | for (i = 0; i < colNodes.length; i += 1) { 36 | colNode = colNodes[i]; 37 | col = { 38 | key: colNode.getAttribute('data-col'), 39 | sortable: !colNode.getAttribute('data-nosort'), 40 | type: colNode.getAttribute('data-type') || 'string' 41 | }; 42 | cols.push(col); 43 | if (col.sortable) { 44 | col.defaultDescSort = col.type === 'number'; 45 | colNode.innerHTML = 46 | colNode.innerHTML + ''; 47 | } 48 | } 49 | return cols; 50 | } 51 | // attaches a data attribute to every tr element with an object 52 | // of data values keyed by column name 53 | function loadRowData(tableRow) { 54 | var tableCols = tableRow.querySelectorAll('td'), 55 | colNode, 56 | col, 57 | data = {}, 58 | i, 59 | val; 60 | for (i = 0; i < tableCols.length; i += 1) { 61 | colNode = tableCols[i]; 62 | col = cols[i]; 63 | val = colNode.getAttribute('data-value'); 64 | if (col.type === 'number') { 65 | val = Number(val); 66 | } 67 | data[col.key] = val; 68 | } 69 | return data; 70 | } 71 | // loads all row data 72 | function loadData() { 73 | var rows = getTableBody().querySelectorAll('tr'), 74 | i; 75 | 76 | for (i = 0; i < rows.length; i += 1) { 77 | rows[i].data = loadRowData(rows[i]); 78 | } 79 | } 80 | // sorts the table using the data for the ith column 81 | function sortByIndex(index, desc) { 82 | var key = cols[index].key, 83 | sorter = function(a, b) { 84 | a = a.data[key]; 85 | b = b.data[key]; 86 | return a < b ? -1 : a > b ? 1 : 0; 87 | }, 88 | finalSorter = sorter, 89 | tableBody = document.querySelector('.coverage-summary tbody'), 90 | rowNodes = tableBody.querySelectorAll('tr'), 91 | rows = [], 92 | i; 93 | 94 | if (desc) { 95 | finalSorter = function(a, b) { 96 | return -1 * sorter(a, b); 97 | }; 98 | } 99 | 100 | for (i = 0; i < rowNodes.length; i += 1) { 101 | rows.push(rowNodes[i]); 102 | tableBody.removeChild(rowNodes[i]); 103 | } 104 | 105 | rows.sort(finalSorter); 106 | 107 | for (i = 0; i < rows.length; i += 1) { 108 | tableBody.appendChild(rows[i]); 109 | } 110 | } 111 | // removes sort indicators for current column being sorted 112 | function removeSortIndicators() { 113 | var col = getNthColumn(currentSort.index), 114 | cls = col.className; 115 | 116 | cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, ''); 117 | col.className = cls; 118 | } 119 | // adds sort indicators for current column being sorted 120 | function addSortIndicators() { 121 | getNthColumn(currentSort.index).className += currentSort.desc 122 | ? ' sorted-desc' 123 | : ' sorted'; 124 | } 125 | // adds event listeners for all sorter widgets 126 | function enableUI() { 127 | var i, 128 | el, 129 | ithSorter = function ithSorter(i) { 130 | var col = cols[i]; 131 | 132 | return function() { 133 | var desc = col.defaultDescSort; 134 | 135 | if (currentSort.index === i) { 136 | desc = !currentSort.desc; 137 | } 138 | sortByIndex(i, desc); 139 | removeSortIndicators(); 140 | currentSort.index = i; 141 | currentSort.desc = desc; 142 | addSortIndicators(); 143 | }; 144 | }; 145 | for (i = 0; i < cols.length; i += 1) { 146 | if (cols[i].sortable) { 147 | // add the click event handler on the th so users 148 | // dont have to click on those tiny arrows 149 | el = getNthColumn(i).querySelector('.sorter').parentElement; 150 | if (el.addEventListener) { 151 | el.addEventListener('click', ithSorter(i)); 152 | } else { 153 | el.attachEvent('onclick', ithSorter(i)); 154 | } 155 | } 156 | } 157 | } 158 | // adds sorting functionality to the UI 159 | return function() { 160 | if (!getTable()) { 161 | return; 162 | } 163 | cols = loadColumns(); 164 | loadData(); 165 | addSortIndicators(); 166 | enableUI(); 167 | }; 168 | })(); 169 | 170 | window.addEventListener('load', addSorting); 171 | -------------------------------------------------------------------------------- /coverage/lcov.info: -------------------------------------------------------------------------------- 1 | TN: 2 | SF:src/events.js 3 | FN:17,eventsSetup 4 | FN:36,eventsInit 5 | FN:38,(anonymous_2) 6 | FN:45,eventsDestroy 7 | FN:47,(anonymous_4) 8 | FN:54,typeOf 9 | FNF:6 10 | FNH:6 11 | FNDA:4,eventsSetup 12 | FNDA:3,eventsInit 13 | FNDA:2,(anonymous_2) 14 | FNDA:1,eventsDestroy 15 | FNDA:1,(anonymous_4) 16 | FNDA:8,typeOf 17 | DA:1,1 18 | DA:2,1 19 | DA:9,1 20 | DA:19,4 21 | DA:20,2 22 | DA:23,2 23 | DA:24,1 24 | DA:28,1 25 | DA:37,3 26 | DA:38,2 27 | DA:39,2 28 | DA:40,2 29 | DA:46,1 30 | DA:47,1 31 | DA:48,1 32 | DA:49,1 33 | DA:55,8 34 | LF:17 35 | LH:17 36 | BRDA:19,0,0,2 37 | BRDA:19,0,1,2 38 | BRDA:19,1,0,4 39 | BRDA:19,1,1,3 40 | BRDA:23,2,0,1 41 | BRDA:23,2,1,1 42 | BRDA:23,3,0,2 43 | BRDA:23,3,1,1 44 | BRDA:30,4,0,1 45 | BRDA:30,4,1,0 46 | BRDA:31,5,0,0 47 | BRDA:31,5,1,1 48 | BRDA:37,6,0,2 49 | BRDA:37,6,1,1 50 | BRDA:46,7,0,1 51 | BRDA:46,7,1,0 52 | BRDA:56,8,0,8 53 | BRDA:56,8,1,7 54 | BRDA:56,8,2,5 55 | BRF:19 56 | BRH:16 57 | end_of_record 58 | TN: 59 | SF:src/getElement.js 60 | FN:1,getEl 61 | FN:14,isElement 62 | FNF:2 63 | FNH:2 64 | FNDA:7,getEl 65 | FNDA:7,isElement 66 | DA:2,7 67 | DA:4,7 68 | DA:5,6 69 | DA:6,1 70 | DA:7,1 71 | DA:10,7 72 | DA:15,7 73 | LF:7 74 | LH:7 75 | BRDA:4,0,0,6 76 | BRDA:4,0,1,1 77 | BRDA:4,1,0,7 78 | BRDA:4,1,1,5 79 | BRDA:6,2,0,1 80 | BRDA:6,2,1,0 81 | BRDA:15,3,0,0 82 | BRDA:15,3,1,7 83 | BRDA:17,4,0,7 84 | BRDA:17,4,1,7 85 | BRDA:17,4,2,6 86 | BRDA:17,4,3,6 87 | BRDA:17,4,4,2 88 | BRF:13 89 | BRH:11 90 | end_of_record 91 | -------------------------------------------------------------------------------- /dist/example.80ee2152.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: black; 3 | --foreground: white; 4 | } 5 | 6 | * { 7 | box-sizing: border-box; 8 | } 9 | 10 | html, 11 | body { 12 | width: 100%; 13 | height: 100%; 14 | min-height: 620vh; 15 | background: var(--background); 16 | color: var(--foreground); 17 | position: relative; 18 | font-family: "MS Gothic", "Nanum Gothic Coding", monospace; 19 | font-size: clamp(1em, 3vmin, 2em); 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | .tip { 25 | width: 100%; 26 | padding: 0.6em 0.4em; 27 | padding-top: 0.75em; 28 | display: flex; 29 | justify-content: space-between; 30 | z-index: 10; 31 | text-transform: uppercase; 32 | mix-blend-mode: exclusion; 33 | } 34 | 35 | .tip.window { 36 | position: fixed; 37 | } 38 | 39 | .grid { 40 | display: grid; 41 | width: 100%; 42 | } 43 | 44 | .grid.v { 45 | height: 400vh; 46 | grid-template-columns: repeat(12, 1fr); 47 | } 48 | 49 | .grid.v .item { 50 | background: red; 51 | border: 1px solid black; 52 | } 53 | 54 | .poster { 55 | width: 100%; 56 | min-height: 100vh; 57 | position: sticky; 58 | top: 0; 59 | left: 0; 60 | background: conic-gradient(from 0deg, #101115, #298dd9, #dee4ca, #f7bf46, #ef1a03); 61 | } 62 | 63 | .poster .scroll { 64 | padding: 10vmin 0.6rem 0.4rem; 65 | padding-top: 10vmin; 66 | /* left: 50%; 67 | transform: translate3d(-50%, -50%, 0); */ 68 | } 69 | 70 | .pill { 71 | background: white; 72 | color: black; 73 | line-height: 1; 74 | padding: 2px 4px; 75 | } 76 | 77 | .hori { 78 | position: fixed; 79 | bottom: 0; 80 | left: 0; 81 | width: 100%; 82 | overflow: auto; 83 | white-space: nowrap; 84 | mix-blend-mode: exclusion; 85 | } 86 | 87 | .poster .tip { 88 | position: relative; 89 | bottom: 12vmin; 90 | left: 0; 91 | } 92 | 93 | .hori::-webkit-scrollbar { 94 | display: none; 95 | } 96 | 97 | .hori .item { 98 | font-size: 13.5vmin; 99 | display: inline-block; 100 | padding: 0 0.6rem; 101 | transform: translateY(0.01em); 102 | font-family: "Arial"; 103 | letter-spacing: -0.04em; 104 | } 105 | 106 | .hori a { 107 | color: inherit; 108 | text-decoration: none; 109 | background: white; 110 | color: black; 111 | padding: 0 0.1em; 112 | } 113 | .hori a:focus-visible { 114 | animation: blink 2s infinite ease-in-out; 115 | } 116 | 117 | .blink { 118 | animation: blink 2s infinite ease-in-out; 119 | } 120 | 121 | @keyframes blink { 122 | 0%, 90%, 100% { 123 | opacity: 0.4; 124 | } 125 | 45%, 50%, 55% { 126 | opacity: 1; 127 | } 128 | } 129 | 130 | /*# sourceMappingURL=/example.80ee2152.css.map */ -------------------------------------------------------------------------------- /dist/example.80ee2152.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EAEA;;;AASF;EACE;EACA;AACA;AAAA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;IAGE;;EAEF;IAGE","file":"example.80ee2152.css","sourceRoot":"../example","sourcesContent":[":root {\n --background: black;\n --foreground: white;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n width: 100%;\n height: 100%;\n min-height: 620vh;\n background: var(--background);\n color: var(--foreground);\n position: relative;\n font-family: 'MS Gothic', 'Nanum Gothic Coding', monospace;\n font-size: clamp(1em, 3vmin, 2em);\n margin: 0;\n padding: 0;\n}\n\n.tip {\n width: 100%;\n padding: 0.6em 0.4em;\n padding-top: 0.75em;\n display: flex;\n justify-content: space-between;\n z-index: 10;\n text-transform: uppercase;\n mix-blend-mode: exclusion;\n}\n\n.tip.window {\n position: fixed;\n}\n\n.grid {\n display: grid;\n width: 100%;\n}\n\n.grid.v {\n height: 400vh;\n grid-template-columns: repeat(12, 1fr);\n}\n\n.grid.v .item {\n background: red;\n border: 1px solid black;\n}\n.poster {\n width: 100%;\n min-height: 100vh;\n position: sticky;\n top: 0;\n left: 0;\n // background: conic-gradient(from 0deg, red, orange, yellow, green, blue);\n background: conic-gradient(\n from 0deg,\n #101115,\n #298dd9,\n #dee4ca,\n #f7bf46,\n #ef1a03\n );\n}\n.poster .scroll {\n padding: 10vmin 0.6rem 0.4rem;\n padding-top: 10vmin;\n /* left: 50%;\n transform: translate3d(-50%, -50%, 0); */\n}\n\n.pill {\n background: white;\n color: black;\n line-height: 1;\n padding: 2px 4px;\n}\n\n.hori {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n overflow: auto;\n white-space: nowrap;\n mix-blend-mode: exclusion;\n}\n\n.poster .tip {\n position: relative;\n bottom: 12vmin;\n left: 0;\n}\n\n.hori::-webkit-scrollbar {\n display: none;\n}\n\n.hori .item {\n font-size: 13.5vmin;\n display: inline-block;\n padding: 0 0.6rem;\n transform: translateY(0.01em);\n font-family: 'Arial';\n letter-spacing: -0.04em;\n}\n\n.hori a {\n color: inherit;\n text-decoration: none;\n background: white;\n color: black;\n padding: 0 0.1em;\n\n &:focus-visible {\n animation: blink 2s infinite ease-in-out;\n }\n}\n\n.blink {\n animation: blink 2s infinite ease-in-out;\n}\n\n@keyframes blink {\n 0%,\n 90%,\n 100% {\n opacity: 0.4;\n }\n 45%,\n 50%,\n 55% {\n opacity: 1;\n }\n}\n"]} -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EGSTAD • Detect Theme 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | window 15 | is not scrolling 16 | 17 |
18 |
19 | x:0 20 | y:0 21 |
22 |
23 |
24 |
25 |
26 | DetectScroll.js is a performant and 27 | lightweight ES6 module for detecting scroll activity. 28 | GITHUB 29 | Created by 30 | EGSTAD 31 |
32 |
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /docs/app.119c5f7d.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"S3PC":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./src/getElement"),i=require("./src/events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,d=void 0!==a&&a,u=n.events,f=void 0===u?void 0:u;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=d,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.isHorizontal&&this.getX(),this.isVertical&&this.getY(),(0,i.eventsInit)(this.el,this.events),this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.debugMode,this.watchScrollPosition(),this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();this.x=t,i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1,this.scrollingR=0):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingL=0,this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX")}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();this.y=t,i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1,this.scrollingU=0):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingD=0,this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY")}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t,{detail:{x:this.x,y:this.y}})),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t,{detail:{x:this.x,y:this.y}})),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}();exports.default=l; 7 | },{"./src/getElement":"D7k7","./src/events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../index.js"));function o(e){return e&&e.__esModule?e:{default:e}}function n(e,o){e.innerText!==o&&(e.innerText=o)}function t(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),u=c.querySelector(".stat"),i=c.querySelector(".dire"),s=c.querySelector(".x"),d=c.querySelector(".y"),f=new e.default(window,{debugMode:!0,events:{scrollStart:function(){n(u,"is scrolling")},scrollStop:function(){n(u,"is not scrolling"),t(i,"")},scrollUp:function(){t(i,"up")},scrollDown:function(){t(i,"down")},scrollLeft:function(){t(i,"left")},scrollRight:function(){t(i,"right")},scrollX:function(){t(s,Math.round(f.x))},scrollY:function(){t(d,Math.round(f.y)),l.style.backgroundImage="conic-gradient(from ".concat(.05*f.y,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(f.y,0),console.log(f.y)}}}); 9 | },{"../index.js":"S3PC"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.119c5f7d.js.map -------------------------------------------------------------------------------- /docs/app.207ad8d9.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"S3PC":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./src/getElement"),i=require("./src/events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.watchScrollPosition(),(0,i.eventsInit)(this.el,this.events),this.debugMode,this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX"),this.x=t}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY"),this.y=t}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t)),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t)),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}();exports.default=l; 7 | },{"./src/getElement":"D7k7","./src/events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../index.js"));function o(e){return e&&e.__esModule?e:{default:e}}function n(e,o){e.innerText!==o&&(e.innerText=o)}function t(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),u=c.querySelector(".stat"),i=c.querySelector(".dire"),s=c.querySelector(".x"),d=c.querySelector(".y"),f=new e.default(window,{debugMode:!0,events:{scrollStart:function(){n(u,"is scrolling")},scrollStop:function(){n(u,"is not scrolling"),t(i,"")},scrollUp:function(){t(i,"up")},scrollDown:function(){t(i,"down")},scrollLeft:function(){t(i,"left")},scrollRight:function(){t(i,"right")},scrollX:function(){t(s,Math.round(f.x))},scrollY:function(){t(d,Math.round(f.y)),l.style.backgroundImage="conic-gradient(from ".concat(.05*f.y,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(f.y,0)}}}); 9 | },{"../index.js":"S3PC"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.207ad8d9.js.map -------------------------------------------------------------------------------- /docs/app.3dc21311.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"uBxZ":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./getElement"),i=require("./events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.watchScrollPosition(),(0,i.eventsInit)(this.el,this.events),this.debugMode,this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX"),this.x=t}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY"),this.y=t}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t)),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t)),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}(),h=l;exports.default=h; 7 | },{"./getElement":"D7k7","./events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../src/index"));function o(e){return e&&e.__esModule?e:{default:e}}function n(e,o){e.innerText!==o&&(e.innerText=o)}function t(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),u=c.querySelector(".stat"),i=c.querySelector(".dire"),s=c.querySelector(".x"),d=c.querySelector(".y"),f=new e.default(window,{debugMode:!0,events:{scrollStart:function(){n(u,"is scrolling")},scrollStop:function(){n(u,"is not scrolling"),t(i,"")},scrollUp:function(){t(i,"up")},scrollDown:function(){t(i,"down")},scrollLeft:function(){t(i,"left")},scrollRight:function(){t(i,"right")},scrollX:function(){t(s,Math.round(f.x))},scrollY:function(){t(d,Math.round(f.y)),l.style.backgroundImage="conic-gradient(from ".concat(.05*f.y,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(f.y,0)}}}); 9 | },{"../src/index":"uBxZ"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.3dc21311.js.map -------------------------------------------------------------------------------- /docs/app.44da1199.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"uBxZ":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./getElement"),i=require("./events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.watchScrollPosition(),(0,i.eventsInit)(this.el,this.events),this.debugMode,this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX"),this.x=t}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY"),this.y=t}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t)),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t)),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}();exports.default=l; 7 | },{"./getElement":"D7k7","./events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../src/index.js"));function o(e){return e&&e.__esModule?e:{default:e}}function n(e,o){e.innerText!==o&&(e.innerText=o)}function t(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),u=c.querySelector(".stat"),i=c.querySelector(".dire"),s=c.querySelector(".x"),d=c.querySelector(".y"),f=new e.default(window,{debugMode:!0,events:{scrollStart:function(){n(u,"is scrolling")},scrollStop:function(){n(u,"is not scrolling"),t(i,"")},scrollUp:function(){t(i,"up")},scrollDown:function(){t(i,"down")},scrollLeft:function(){t(i,"left")},scrollRight:function(){t(i,"right")},scrollX:function(){t(s,Math.round(f.x))},scrollY:function(){t(d,Math.round(f.y)),l.style.backgroundImage="conic-gradient(from ".concat(.05*f.y,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(f.y,0)}}}); 9 | },{"../src/index.js":"uBxZ"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.44da1199.js.map -------------------------------------------------------------------------------- /docs/app.5cb3694b.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"S3PC":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./src/getElement"),i=require("./src/events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.isHorizontal&&this.getX(),this.isVertical&&this.getY(),(0,i.eventsInit)(this.el,this.events),this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.debugMode,this.watchScrollPosition(),this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();this.x=t,i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1,this.scrollingR=0):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingL=0,this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX")}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();this.y=t,i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1,this.scrollingU=0):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingD=0,this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY")}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t)),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t,{detail:{x:this.x,y:this.y}})),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}();exports.default=l; 7 | },{"./src/getElement":"D7k7","./src/events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../index.js"));function o(e){return e&&e.__esModule?e:{default:e}}function n(e,o){e.innerText!==o&&(e.innerText=o)}function t(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),u=c.querySelector(".stat"),i=c.querySelector(".dire"),s=c.querySelector(".x"),d=c.querySelector(".y"),f=new e.default(window,{debugMode:!0,events:{scrollStart:function(){n(u,"is scrolling")},scrollStop:function(){n(u,"is not scrolling"),t(i,"")},scrollUp:function(){t(i,"up")},scrollDown:function(){t(i,"down")},scrollLeft:function(){t(i,"left")},scrollRight:function(){t(i,"right")},scrollX:function(){t(s,Math.round(f.x))},scrollY:function(){t(d,Math.round(f.y)),l.style.backgroundImage="conic-gradient(from ".concat(.05*f.y,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(f.y,0),console.log(f.y)}}}); 9 | },{"../index.js":"S3PC"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.5cb3694b.js.map -------------------------------------------------------------------------------- /docs/app.620c149e.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"S3PC":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./src/getElement"),i=require("./src/events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.timeout=null,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.isHorizontal&&this.getX(),this.isVertical&&this.getY(),(0,i.eventsInit)(this.el,this.events),this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.debugMode,this.watchScrollPosition(),this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1,this.hasInit=0}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();this.x=t,i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1,this.scrollingR=0):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingL=0,this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX")}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();this.y=t,i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1,this.scrollingU=0):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingD=0,this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY")}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t,{detail:{x:this.x,y:this.y}})),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t)),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}();exports.default=l; 7 | },{"./src/getElement":"D7k7","./src/events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../index.js"));function o(e){return e&&e.__esModule?e:{default:e}}function t(e,o){e.innerText!==o&&(e.innerText=o)}function n(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),i=c.querySelector(".stat"),u=c.querySelector(".dire"),d=c.querySelector(".x"),s=c.querySelector(".y");window.detectScroll=new e.default(window,{debugMode:!0,events:{scrollStart:function(){t(i,"is scrolling")},scrollStop:function(){t(i,"is not scrolling"),n(u,"")},scrollUp:function(e){n(u,"up")},scrollDown:function(){n(u,"down")},scrollLeft:function(){n(u,"left")},scrollRight:function(){n(u,"right")},scrollX:function(){n(d,Math.round(window.detectScroll.x))},scrollY:function(e){var o=window.detectScroll?window.detectScroll.y:0;n(s,Math.round(o)),l.style.backgroundImage="conic-gradient(from ".concat(.05*o,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(o,0)}}}); 9 | },{"../index.js":"S3PC"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.620c149e.js.map -------------------------------------------------------------------------------- /docs/app.8e64bb2a.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"S3PC":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./src/getElement"),i=require("./src/events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.watchScrollPosition(),(0,i.eventsInit)(this.el,this.events),this.debugMode,this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX"),this.x=t}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY"),this.y=t}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t)),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t)),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}(),h=l;exports.default=h; 7 | },{"./src/getElement":"D7k7","./src/events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../index"));function o(e){return e&&e.__esModule?e:{default:e}}function n(e,o){e.innerText!==o&&(e.innerText=o)}function t(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),u=c.querySelector(".stat"),i=c.querySelector(".dire"),s=c.querySelector(".x"),d=c.querySelector(".y"),f=new e.default(window,{debugMode:!0,events:{scrollStart:function(){n(u,"is scrolling")},scrollStop:function(){n(u,"is not scrolling"),t(i,"")},scrollUp:function(){t(i,"up")},scrollDown:function(){t(i,"down")},scrollLeft:function(){t(i,"left")},scrollRight:function(){t(i,"right")},scrollX:function(){t(s,Math.round(f.x))},scrollY:function(){t(d,Math.round(f.y)),l.style.backgroundImage="conic-gradient(from ".concat(.05*f.y,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(f.y,0)}}}); 9 | },{"../index":"S3PC"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.8e64bb2a.js.map -------------------------------------------------------------------------------- /docs/app.9c0cc36f.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"S3PC":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./src/getElement"),i=require("./src/events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.isHorizontal&&this.getX(),this.isVertical&&this.getY(),(0,i.eventsInit)(this.el,this.events),this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.debugMode,this.watchScrollPosition(),this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1,this.scrollingR=0):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingL=0,this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX"),this.x=t}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1,this.scrollingU=0):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingD=0,this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY"),this.y=t}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t)),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t,{detail:{x:this.x,y:this.y}})),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}();exports.default=l; 7 | },{"./src/getElement":"D7k7","./src/events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../index.js"));function o(e){return e&&e.__esModule?e:{default:e}}function n(e,o){e.innerText!==o&&(e.innerText=o)}function t(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),u=c.querySelector(".stat"),i=c.querySelector(".dire"),s=c.querySelector(".x"),d=c.querySelector(".y"),f=new e.default(window,{debugMode:!0,events:{scrollStart:function(){n(u,"is scrolling")},scrollStop:function(){n(u,"is not scrolling"),t(i,"")},scrollUp:function(){t(i,"up")},scrollDown:function(){t(i,"down")},scrollLeft:function(){t(i,"left")},scrollRight:function(){t(i,"right")},scrollX:function(){t(s,Math.round(f.x))},scrollY:function(){t(d,Math.round(f.y)),l.style.backgroundImage="conic-gradient(from ".concat(.05*f.y,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(f.y,0)}}}); 9 | },{"../index.js":"S3PC"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.9c0cc36f.js.map -------------------------------------------------------------------------------- /docs/app.a955beda.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"S3PC":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./src/getElement"),i=require("./src/events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.timeout=null,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.isHorizontal&&this.getX(),this.isVertical&&this.getY(),(0,i.eventsInit)(this.el,this.events),this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.debugMode,this.watchScrollPosition(),this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1,this.hasInit=0}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();this.x=t,i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1,this.scrollingR=0):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingL=0,this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX")}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();this.y=t,i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1,this.scrollingU=0):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingD=0,this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY")}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t,{detail:{x:this.x,y:this.y}})),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t)),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}();exports.default=l; 7 | },{"./src/getElement":"D7k7","./src/events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../index.js"));function o(e){return e&&e.__esModule?e:{default:e}}function t(e,o){e.innerText!==o&&(e.innerText=o)}function n(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),i=c.querySelector(".stat"),u=c.querySelector(".dire"),d=c.querySelector(".x"),s=c.querySelector(".y");window.detectScroll=new e.default(window,{debugMode:!0,events:{scrollStart:function(){t(i,"is scrolling")},scrollStop:function(){t(i,"is not scrolling"),n(u,"")},scrollUp:function(e){n(u,"up")},scrollDown:function(){n(u,"down")},scrollLeft:function(){n(u,"left")},scrollRight:function(){n(u,"right")},scrollX:function(){n(d,Math.round(window.detectScroll.x))},scrollY:function(e){var o=window.detectScroll?window.detectScroll.y:0;n(s,Math.round(o)),l.style.backgroundImage="conic-gradient(from ".concat(.05*o,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(o,0)}}}); 9 | },{"../index.js":"S3PC"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.a955beda.js.map -------------------------------------------------------------------------------- /docs/app.aa69ba76.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"uBxZ":[function(require,module,exports) { 6 | "use strict";var t=require("./getElement"),i=require("./events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.watchScrollPosition(),(0,i.eventsInit)(this.el,this.events),this.debugMode,this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX"),this.x=t}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY"),this.y=t}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t)),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t)),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}();module.exports=l; 7 | },{"./getElement":"D7k7","./events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../src/index"));function o(e){return e&&e.__esModule?e:{default:e}}function n(e,o){e.innerText!==o&&(e.innerText=o)}function t(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),u=c.querySelector(".stat"),i=c.querySelector(".dire"),s=c.querySelector(".x"),d=c.querySelector(".y"),f=new e.default(window,{debugMode:!0,events:{scrollStart:function(){n(u,"is scrolling")},scrollStop:function(){n(u,"is not scrolling"),t(i,"")},scrollUp:function(){t(i,"up")},scrollDown:function(){t(i,"down")},scrollLeft:function(){t(i,"left")},scrollRight:function(){t(i,"right")},scrollX:function(){t(s,Math.round(f.x))},scrollY:function(){t(d,Math.round(f.y)),l.style.backgroundImage="conic-gradient(from ".concat(.05*f.y,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(f.y,0)}}}); 9 | },{"../src/index":"uBxZ"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.aa69ba76.js.map -------------------------------------------------------------------------------- /docs/app.cea24b00.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"S3PC":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./src/getElement"),i=require("./src/events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.isHorizontal&&this.getX(),this.isVertical&&this.getY(),(0,i.eventsInit)(this.el,this.events),this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.debugMode,this.watchScrollPosition(),this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX"),this.x=t}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY"),this.y=t}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t)),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t,{detail:{x:this.x,y:this.y}})),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}();exports.default=l; 7 | },{"./src/getElement":"D7k7","./src/events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../index.js"));function o(e){return e&&e.__esModule?e:{default:e}}function n(e,o){e.innerText!==o&&(e.innerText=o)}function t(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),u=c.querySelector(".stat"),i=c.querySelector(".dire"),s=c.querySelector(".x"),d=c.querySelector(".y"),f=new e.default(window,{debugMode:!0,events:{scrollStart:function(){n(u,"is scrolling")},scrollStop:function(){n(u,"is not scrolling"),t(i,"")},scrollUp:function(){t(i,"up")},scrollDown:function(){t(i,"down")},scrollLeft:function(){t(i,"left")},scrollRight:function(){t(i,"right")},scrollX:function(){t(s,Math.round(f.x))},scrollY:function(){t(d,Math.round(f.y)),l.style.backgroundImage="conic-gradient(from ".concat(.05*f.y,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(f.y,0)}}}); 9 | },{"../index.js":"S3PC"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.cea24b00.js.map -------------------------------------------------------------------------------- /docs/app.e855628a.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ct.length)&&(r=t.length);for(var e=0,n=new Array(r);e0&&!Array.isArray(r)} 5 | },{}],"S3PC":[function(require,module,exports) { 6 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=require("./src/getElement"),i=require("./src/events");function s(t){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function e(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function o(t,i){for(var s=0;s1&&void 0!==arguments[1]?arguments[1]:{},l=n.horizontal,h=void 0===l||l,r=n.vertical,c=void 0===r||r,a=n.debugMode,u=void 0!==a&&a,d=n.events,f=void 0===d?void 0:d;e(this,o),this.el=(0,t.getEl)(s),this.x=this.getX(),this.y=this.getY(),this.lastDispatch=null,this.hasScrolled=!1,this.isWindow=window===s,this.isScrolling=void 0,this.isVertical=c,this.isHorizontal=h,this.rafId=null,this.rafTick=0,this.rafKilled=!1,this.destroy=this.destroy.bind(this),this.onScroll=this.onScroll.bind(this),this.events=(0,i.eventsSetup)(f,this.isVertical,this.isHorizontal),this.debugMode=u,this.hasInit=0,this.destroyed=null,this.passiveMode=!0,this.scrollingU=0,this.scrollingD=0,this.scrollingL=0,this.scrollingR=0,this.init()}return n(o,[{key:"init",value:function(){this.isHorizontal&&this.getX(),this.isVertical&&this.getY(),(0,i.eventsInit)(this.el,this.events),this.el.addEventListener("scroll",this.onScroll,{passive:this.passiveMode}),this.debugMode,this.watchScrollPosition(),this.destroyed=0,this.hasInit=1}},{key:"destroy",value:function(){this.el.removeEventListener("scroll",this.onScroll,{passive:this.passiveMode}),(0,i.eventsDestroy)(this.el,this.events),window.clearTimeout(this.timeout),window.cancelAnimationFrame(this.rafId),this.rafKilled=!0,this.events=void 0,this.destroyed=1}},{key:"scrollTimeout",value:function(){var t=this;this.timeout=setTimeout(function(){t.onScrollEnd()},120)}},{key:"watchScrollPosition",value:function(){this.isHorizontal&&this.watchX(),this.isVertical&&this.watchY()}},{key:"getY",value:function(){return this.isWindow?window.pageYOffset:this.el.scrollTop}},{key:"getYMax",value:function(){return(this.isWindow?Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.documentElement.clientHeight):Math.max(this.el.scrollHeight,this.el.offsetHeight,this.el.clientHeight))-window.innerHeight}},{key:"isMaxY",value:function(){return this.getY()>=this.getYMax()}},{key:"isMinY",value:function(){return this.getY()<=0}},{key:"getX",value:function(){return this.isWindow?window.pageXOffset:this.el.scrollLeft}},{key:"getXMax",value:function(){return(this.isWindow?Math.max(document.body.scrollWidth,document.documentElement.scrollWidth,document.body.offsetWidth,document.documentElement.offsetWidth,document.documentElement.clientWidth):Math.max(this.el.scrollWidth,this.el.offsetWidth,this.el.clientWidth))-window.innerWidth}},{key:"isMaxX",value:function(){return this.getX()>=this.getXMax()}},{key:"isMinX",value:function(){return this.getX()<=0}},{key:"watchX",value:function(){var t=this.getX(),i=t!==this.x,s=tthis.x,o=t!==this.x&&this.isMaxX(),n=t!==this.x&&this.isMinX();i&&(this.onScrollStart(),s&&!this.scrollingL?(this.dispatch("scrollLeft"),this.scrollingL=1):e&&!this.scrollingR&&(this.dispatch("scrollRight"),this.scrollingR=1)),n&&this.dispatch("scrollMinX"),o&&this.dispatch("scrollMaxX"),this.x&&this.dispatch("scrollX"),this.x=t}},{key:"watchY",value:function(){var t=this.getY(),i=t!==this.y,s=tthis.y,o=t!==this.y&&this.isMaxY(),n=t!==this.y&&this.isMinY();i&&(this.onScrollStart(),e&&!this.scrollingD?(this.dispatch("scrollDown"),this.scrollingD=1):s&&!this.scrollingU&&(this.dispatch("scrollUp"),this.scrollingU=1)),n&&this.dispatch("scrollMinY"),o&&this.dispatch("scrollMaxY"),this.y&&this.dispatch("scrollY"),this.y=t}},{key:"dispatch",value:function(t){var i="object"===s(this.events)&&t in this.events,e=Array.isArray(this.events)&&this.events.includes(t);this.lastDispatch!==t&&(i||e)&&(this.el.dispatchEvent(new CustomEvent(t)),this.lastDispatch=t,this.debugMode&&console.info(t)),["scrollX","scrollY"].includes(t)&&(this.el.dispatchEvent(new CustomEvent(t)),this.debugMode&&console.info(t))}},{key:"onScroll",value:function(){var t=this;this.rafKilled||(this.rafId=window.requestAnimationFrame(function(){t.watchScrollPosition(),window.clearTimeout(t.timeout),t.scrollTimeout()}))}},{key:"onScrollStart",value:function(){!this.isScrolling&&this.hasInit&&(this.dispatch("scrollStart"),this.isScrolling=!0),this.hasScrolled=1}},{key:"onScrollEnd",value:function(){this.dispatch("scrollStop"),this.isScrolling=!1,this.scrollingU=!1,this.scrollingD=!1,this.scrollingL=!1,this.scrollingR=!1}}]),o}();exports.default=l; 7 | },{"./src/getElement":"D7k7","./src/events":"Yeg4"}],"A2T1":[function(require,module,exports) { 8 | "use strict";var e=o(require("../index.js"));function o(e){return e&&e.__esModule?e:{default:e}}function n(e,o){e.innerText!==o&&(e.innerText=o)}function t(e,o){e.innerText=o}var r=document.querySelector(".hori"),c=document.querySelector(".tip.window"),l=document.querySelector(".poster"),u=c.querySelector(".stat"),i=c.querySelector(".dire"),s=c.querySelector(".x"),d=c.querySelector(".y"),f=new e.default(window,{debugMode:!0,events:{scrollStart:function(){n(u,"is scrolling")},scrollStop:function(){n(u,"is not scrolling"),t(i,"")},scrollUp:function(){t(i,"up")},scrollDown:function(){t(i,"down")},scrollLeft:function(){t(i,"left")},scrollRight:function(){t(i,"right")},scrollX:function(){t(s,Math.round(f.x))},scrollY:function(){t(d,Math.round(f.y)),l.style.backgroundImage="conic-gradient(from ".concat(.05*f.y,"deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)"),r.scrollTo(f.y,0)}}}); 9 | },{"../index.js":"S3PC"}]},{},["A2T1"], null) 10 | //# sourceMappingURL=app.e855628a.js.map -------------------------------------------------------------------------------- /docs/example.e3a7210b.css: -------------------------------------------------------------------------------- 1 | :root{--background:#000;--foreground:#fff}*{box-sizing:border-box}body,html{width:100%;height:100%;min-height:620vh;background:var(--background);color:var(--foreground);position:relative;font-family:MS Gothic,Nanum Gothic Coding,monospace;font-size:clamp(.8em,3vmin,2em);margin:0;padding:0}.tip{width:100%;padding:.75em .4em .6em;display:flex;justify-content:space-between;z-index:10;text-transform:uppercase;mix-blend-mode:exclusion}.tip.window{position:fixed}.grid{display:grid;width:100%}.grid.v{height:400vh;grid-template-columns:repeat(12,1fr)}.grid.v .item{background:red;border:1px solid #000}.poster{width:100%;min-height:100vh;position:sticky;top:0;left:0;background:conic-gradient(from 0deg,#101115,#298dd9,#dee4ca,#f7bf46,#ef1a03)}.poster .scroll{padding:10vmin .6rem .4rem}.pill{background:#fff;color:#000;line-height:1;padding:2px 4px}.hori{position:fixed;bottom:0;left:0;width:100%;overflow:auto;white-space:nowrap;mix-blend-mode:exclusion}.poster .tip{position:relative;bottom:12vmin;left:0}.hori::-webkit-scrollbar{display:none}.hori .item{font-size:12vmin;display:inline-block;padding:0 .6rem;transform:translateY(.01em);font-family:Arial;letter-spacing:-.04em}.hori a{color:inherit;text-decoration:none;background:#fff;color:#000;padding:0 .1em}.blink,.hori a:focus-visible{animation:blink 2s ease-in-out infinite}@keyframes blink{0%,90%,to{opacity:.4}45%,50%,55%{opacity:1}} 2 | /*# sourceMappingURL=example.e3a7210b.css.map */ -------------------------------------------------------------------------------- /docs/example.e3a7210b.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA,MACE,iBAAA,CACA,kBAGF,EACE,sBAGF,UAEE,UAAA,CACA,WAAA,CACA,gBAAA,CACA,4BAAA,CACA,uBAAA,CACA,iBAAA,CACA,mDAAA,CACA,+BAAA,CACA,QAAA,CACA,UAGF,KACE,UAAA,CAEA,uBAAA,CACA,YAAA,CACA,6BAAA,CACA,UAAA,CACA,wBAAA,CACA,yBAGF,YACE,eAGF,MACE,YAAA,CACA,WAGF,QACE,YAAA,CACA,qCAGF,cACE,cAAA,CACA,sBAEF,QACE,UAAA,CACA,gBAAA,CACA,eAAA,CACA,KAAA,CACA,MAAA,CAEA,6EASF,gBAEE,2BAKF,MACE,eAAA,CACA,UAAA,CACA,aAAA,CACA,gBAGF,MACE,cAAA,CACA,QAAA,CACA,MAAA,CACA,UAAA,CACA,aAAA,CACA,kBAAA,CACA,yBAGF,aACE,iBAAA,CACA,aAAA,CACA,OAGF,yBACE,aAGF,YACE,gBAAA,CACA,oBAAA,CACA,eAAA,CACA,2BAAA,CACA,iBAAA,CACA,sBAGF,QACE,aAAA,CACA,oBAAA,CACA,eAAA,CACA,UAAA,CACA,eAOF,6BACE,wCAGF,iBACE,UAGE,WAEF,YAGE","file":"example.e3a7210b.css","sourceRoot":"../example","sourcesContent":[":root {\n --background: black;\n --foreground: white;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n width: 100%;\n height: 100%;\n min-height: 620vh;\n background: var(--background);\n color: var(--foreground);\n position: relative;\n font-family: 'MS Gothic', 'Nanum Gothic Coding', monospace;\n font-size: clamp(0.8em, 3vmin, 2em);\n margin: 0;\n padding: 0;\n}\n\n.tip {\n width: 100%;\n padding: 0.6em 0.4em;\n padding-top: 0.75em;\n display: flex;\n justify-content: space-between;\n z-index: 10;\n text-transform: uppercase;\n mix-blend-mode: exclusion;\n}\n\n.tip.window {\n position: fixed;\n}\n\n.grid {\n display: grid;\n width: 100%;\n}\n\n.grid.v {\n height: 400vh;\n grid-template-columns: repeat(12, 1fr);\n}\n\n.grid.v .item {\n background: red;\n border: 1px solid black;\n}\n.poster {\n width: 100%;\n min-height: 100vh;\n position: sticky;\n top: 0;\n left: 0;\n // background: conic-gradient(from 0deg, red, orange, yellow, green, blue);\n background: conic-gradient(\n from 0deg,\n #101115,\n #298dd9,\n #dee4ca,\n #f7bf46,\n #ef1a03\n );\n}\n.poster .scroll {\n padding: 10vmin 0.6rem 0.4rem;\n padding-top: 10vmin;\n /* left: 50%;\n transform: translate3d(-50%, -50%, 0); */\n}\n\n.pill {\n background: white;\n color: black;\n line-height: 1;\n padding: 2px 4px;\n}\n\n.hori {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n overflow: auto;\n white-space: nowrap;\n mix-blend-mode: exclusion;\n}\n\n.poster .tip {\n position: relative;\n bottom: 12vmin;\n left: 0;\n}\n\n.hori::-webkit-scrollbar {\n display: none;\n}\n\n.hori .item {\n font-size: 12vmin;\n display: inline-block;\n padding: 0 0.6rem;\n transform: translateY(0.01em);\n font-family: 'Arial';\n letter-spacing: -0.04em;\n}\n\n.hori a {\n color: inherit;\n text-decoration: none;\n background: white;\n color: black;\n padding: 0 0.1em;\n\n &:focus-visible {\n animation: blink 2s infinite ease-in-out;\n }\n}\n\n.blink {\n animation: blink 2s infinite ease-in-out;\n}\n\n@keyframes blink {\n 0%,\n 90%,\n 100% {\n opacity: 0.4;\n }\n 45%,\n 50%,\n 55% {\n opacity: 1;\n }\n}\n"]} -------------------------------------------------------------------------------- /docs/example.fd9e1284.css: -------------------------------------------------------------------------------- 1 | :root{--background:#000;--foreground:#fff}*{box-sizing:border-box}body,html{width:100%;height:100%;min-height:620vh;background:var(--background);color:var(--foreground);position:relative;font-family:MS Gothic,Nanum Gothic Coding,monospace;font-size:clamp(1em,3vmin,2em);margin:0;padding:0}.tip{width:100%;padding:.75em .4em .6em;display:flex;justify-content:space-between;z-index:10;text-transform:uppercase;mix-blend-mode:exclusion}.tip.window{position:fixed}.grid{display:grid;width:100%}.grid.v{height:400vh;grid-template-columns:repeat(12,1fr)}.grid.v .item{background:red;border:1px solid #000}.poster{width:100%;min-height:100vh;position:sticky;top:0;left:0;background:conic-gradient(from 0deg,#101115,#298dd9,#dee4ca,#f7bf46,#ef1a03)}.poster .scroll{padding:10vmin .6rem .4rem}.pill{background:#fff;color:#000;line-height:1;padding:2px 4px}.hori{position:fixed;bottom:0;left:0;width:100%;overflow:auto;white-space:nowrap;mix-blend-mode:exclusion}.poster .tip{position:relative;bottom:12vmin;left:0}.hori::-webkit-scrollbar{display:none}.hori .item{font-size:13.5vmin;display:inline-block;padding:0 .6rem;transform:translateY(.01em);font-family:Arial;letter-spacing:-.04em}.hori a{color:inherit;text-decoration:none;background:#fff;color:#000;padding:0 .1em}.blink,.hori a:focus-visible{animation:blink 2s ease-in-out infinite}@keyframes blink{0%,90%,to{opacity:.4}45%,50%,55%{opacity:1}} 2 | /*# sourceMappingURL=example.fd9e1284.css.map */ -------------------------------------------------------------------------------- /docs/example.fd9e1284.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["index.scss"],"names":[],"mappings":"AAAA,MACE,iBAAA,CACA,kBAGF,EACE,sBAGF,UAEE,UAAA,CACA,WAAA,CACA,gBAAA,CACA,4BAAA,CACA,uBAAA,CACA,iBAAA,CACA,mDAAA,CACA,8BAAA,CACA,QAAA,CACA,UAGF,KACE,UAAA,CAEA,uBAAA,CACA,YAAA,CACA,6BAAA,CACA,UAAA,CACA,wBAAA,CACA,yBAGF,YACE,eAGF,MACE,YAAA,CACA,WAGF,QACE,YAAA,CACA,qCAGF,cACE,cAAA,CACA,sBAEF,QACE,UAAA,CACA,gBAAA,CACA,eAAA,CACA,KAAA,CACA,MAAA,CAEA,6EASF,gBAEE,2BAKF,MACE,eAAA,CACA,UAAA,CACA,aAAA,CACA,gBAGF,MACE,cAAA,CACA,QAAA,CACA,MAAA,CACA,UAAA,CACA,aAAA,CACA,kBAAA,CACA,yBAGF,aACE,iBAAA,CACA,aAAA,CACA,OAGF,yBACE,aAGF,YACE,kBAAA,CACA,oBAAA,CACA,eAAA,CACA,2BAAA,CACA,iBAAA,CACA,sBAGF,QACE,aAAA,CACA,oBAAA,CACA,eAAA,CACA,UAAA,CACA,eAOF,6BACE,wCAGF,iBACE,UAGE,WAEF,YAGE","file":"example.fd9e1284.css","sourceRoot":"../example","sourcesContent":[":root {\n --background: black;\n --foreground: white;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody {\n width: 100%;\n height: 100%;\n min-height: 620vh;\n background: var(--background);\n color: var(--foreground);\n position: relative;\n font-family: 'MS Gothic', 'Nanum Gothic Coding', monospace;\n font-size: clamp(1em, 3vmin, 2em);\n margin: 0;\n padding: 0;\n}\n\n.tip {\n width: 100%;\n padding: 0.6em 0.4em;\n padding-top: 0.75em;\n display: flex;\n justify-content: space-between;\n z-index: 10;\n text-transform: uppercase;\n mix-blend-mode: exclusion;\n}\n\n.tip.window {\n position: fixed;\n}\n\n.grid {\n display: grid;\n width: 100%;\n}\n\n.grid.v {\n height: 400vh;\n grid-template-columns: repeat(12, 1fr);\n}\n\n.grid.v .item {\n background: red;\n border: 1px solid black;\n}\n.poster {\n width: 100%;\n min-height: 100vh;\n position: sticky;\n top: 0;\n left: 0;\n // background: conic-gradient(from 0deg, red, orange, yellow, green, blue);\n background: conic-gradient(\n from 0deg,\n #101115,\n #298dd9,\n #dee4ca,\n #f7bf46,\n #ef1a03\n );\n}\n.poster .scroll {\n padding: 10vmin 0.6rem 0.4rem;\n padding-top: 10vmin;\n /* left: 50%;\n transform: translate3d(-50%, -50%, 0); */\n}\n\n.pill {\n background: white;\n color: black;\n line-height: 1;\n padding: 2px 4px;\n}\n\n.hori {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 100%;\n overflow: auto;\n white-space: nowrap;\n mix-blend-mode: exclusion;\n}\n\n.poster .tip {\n position: relative;\n bottom: 12vmin;\n left: 0;\n}\n\n.hori::-webkit-scrollbar {\n display: none;\n}\n\n.hori .item {\n font-size: 13.5vmin;\n display: inline-block;\n padding: 0 0.6rem;\n transform: translateY(0.01em);\n font-family: 'Arial';\n letter-spacing: -0.04em;\n}\n\n.hori a {\n color: inherit;\n text-decoration: none;\n background: white;\n color: black;\n padding: 0 0.1em;\n\n &:focus-visible {\n animation: blink 2s infinite ease-in-out;\n }\n}\n\n.blink {\n animation: blink 2s infinite ease-in-out;\n}\n\n@keyframes blink {\n 0%,\n 90%,\n 100% {\n opacity: 0.4;\n }\n 45%,\n 50%,\n 55% {\n opacity: 1;\n }\n}\n"]} -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | EGSTAD • Detect Theme
window is not scrolling
x:0 y:0
DetectScroll.js is a performant and lightweight ES6 module for detecting scroll activity. GITHUB Created by EGSTAD
-------------------------------------------------------------------------------- /example/_test.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad-construct/detect-scroll/72cfe564683cc2c8f2e3498f6345e99fa22835c9/example/_test.gif -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | import DetectScroll from '../index.js' 2 | 3 | function updateState(el, position) { 4 | if (el.innerText !== position) { 5 | // eslint-disable-next-line no-param-reassign 6 | el.innerText = position 7 | } 8 | } 9 | 10 | function updateDirection(el, direction) { 11 | el.innerText = direction 12 | } 13 | 14 | // ---------------------------------------------------------------------------- 15 | // Window Element 16 | // ---------------------------------------------------------------------------- 17 | const hori = document.querySelector('.hori') 18 | const tool1 = document.querySelector('.tip.window') 19 | const poster = document.querySelector('.poster') 20 | const state1 = tool1.querySelector('.stat') 21 | const dir1 = tool1.querySelector('.dire') 22 | const x1 = tool1.querySelector('.x') 23 | const y1 = tool1.querySelector('.y') 24 | 25 | window.detectScroll = new DetectScroll(window, { 26 | // horizontal: false, 27 | debugMode: true, 28 | events: { 29 | scrollStart: () => { 30 | updateState(state1, 'is scrolling') 31 | }, 32 | scrollStop: () => { 33 | updateState(state1, 'is not scrolling') 34 | updateDirection(dir1, '') 35 | updateDirection(x1, Math.round(window.detectScroll.x)) 36 | updateDirection(y1, Math.round(window.detectScroll.y)) 37 | }, 38 | scrollUp: (ev) => { 39 | updateDirection(dir1, 'up') 40 | }, 41 | scrollDown: () => { 42 | updateDirection(dir1, 'down') 43 | }, 44 | scrollLeft: () => { 45 | updateDirection(dir1, 'left') 46 | }, 47 | scrollRight: () => { 48 | updateDirection(dir1, 'right') 49 | }, 50 | scrollX: () => { 51 | updateDirection(x1, Math.round(window.detectScroll.x)) 52 | // background: 53 | }, 54 | scrollY: (ev) => { 55 | const y = window.detectScroll ? window.detectScroll.y : 0 56 | updateDirection(y1, Math.round(y)) 57 | 58 | poster.style.backgroundImage = `conic-gradient(from ${ 59 | y * 0.05 60 | }deg, #101115, #298DD9, #DEE4CA, #F7BF46, #EF1A03)` 61 | 62 | hori.scrollTo(y, 0) 63 | console.log(ev) 64 | // console.log(instanceWindow.y) 65 | }, 66 | // scrollMaxY: () => {}, 67 | // scrollMinX: () => {}, 68 | // scrollMaxX: () => {}, 69 | }, 70 | }) 71 | 72 | // // const tool2 = hori.querySelector('.tip') 73 | // // const state2 = tool2.querySelector('.stat') 74 | // // const dir2 = tool2.querySelector('.dire') 75 | // // const x2 = tool2.querySelector('.x') 76 | // // const y2 = tool2.querySelector('.y') 77 | // const instanceHori = new DetectScroll(hori, { 78 | // debugMode: true, 79 | // // events: { 80 | // // scrollStart: () => { 81 | // // updateState(state2, 'is scrolling') 82 | // // }, 83 | // // scrollStop: () => { 84 | // // updateState(state2, 'is not scrolling') 85 | // // updateDirection(dir2, '') 86 | // // }, 87 | // // scrollLeft: () => { 88 | // // updateDirection(dir2, 'left') 89 | // // }, 90 | // // scrollRight: () => { 91 | // // updateDirection(dir2, 'right') 92 | // // }, 93 | // // scrollX: () => { 94 | // // updateDirection(x2, Math.round(instanceHori.x)) 95 | // // }, 96 | // // }, 97 | // }) 98 | 99 | // 100 | 101 | // const scrollV = window 102 | // const scrollV = document.querySelector('.h') 103 | // const teardownV = document.querySelector('.teardown') 104 | // // eslint-disable-next-line no-unused-vars 105 | // const tipV = document.querySelector('.tip.v') 106 | // const vDir = tipV.querySelector('.direction') 107 | // const vPos = tipV.querySelector('.state') 108 | // const scrollVInstance = new DetectScroll(scrollV, { 109 | // horizontal: true, 110 | // vertical: true, 111 | // events: [], 112 | // events: { 113 | // scrollStart: () => { 114 | // console.log('start') 115 | // updateState(vPos, 'scrolling') 116 | // }, 117 | // }, 118 | // events: { 119 | // scrollStart: () => { 120 | // console.log('start') 121 | // updateState(vPos, 'scrolling') 122 | // }, 123 | // }, 124 | // events: { 125 | 126 | // }, 127 | // }) 128 | // console.log(scrollVInstance) 129 | 130 | // 131 | // 132 | // 133 | // 134 | // 135 | // 136 | // 137 | // 138 | // 139 | // 140 | // 141 | // 142 | 143 | // Detect Vertical Scroll 144 | // Events fired: "scrollStart", "scrollStop", "scrollUp", "scrollDown", "scrollMinY", "scrollMaxY" 145 | // const detectScroll = new DetectScroll(window) 146 | 147 | // Detect Horizontal Scroll 148 | // Events fired: "scrollStart", "scrollStop", "scrollLeft", "scrollRight", "scrollMinX", "scrollMaxX" 149 | // const detectScroll = new DetectScroll(window, { 150 | // horizontal: true, 151 | // vertical: false, 152 | // }) 153 | 154 | // Detect Vertical & Horizontal Scroll 155 | // Fires "scrollStart", "scrollStop", "scrollUp", "scrollDown", "scrollMinY", "scrollMaxY", "scrollLeft", "scrollRight", "scrollMinX", "scrollMaxX" 156 | // const detectScroll = new DetectScroll(window, { 157 | // horizontal: true, 158 | // }) 159 | 160 | // Detect scroll start and stop only 161 | // Fires "scrollStart", "scrollStop", 162 | // const detectScroll = new DetectScroll(window, { 163 | // vertical: false, 164 | // horizontal: false, 165 | // }) 166 | 167 | // Check Events from anywhere 168 | // Events fired: "scrollStart", "scrollStop", "scrollUp", "scrollDown", "scrollMinY", "scrollMaxY" 169 | // const el = window 170 | // const detectScroll = new DetectScroll(el, { 171 | // // debugMode: true, 172 | // events: { 173 | // scrollUp: () => { 174 | // console.log('u') 175 | // }, 176 | // scrollDown: () => { 177 | // console.log('d') 178 | // }, 179 | // }, 180 | // }) 181 | // const foo = (ev) => { 182 | // console.log(ev.type) 183 | // } 184 | 185 | // el.addEventListener('scrollUp', foo) 186 | // el.addEventListener('scrollDown', foo) 187 | // el.addEventListener('scrollStop', foo) 188 | 189 | // Check Events from anywhere 190 | // const el = window 191 | // const detectScroll = new DetectScroll(el, { 192 | // events: { 193 | // scrollStart: () => { 194 | // console.log('start') 195 | // }, 196 | // scrollStop: () => { 197 | // console.log('stop') 198 | // }, 199 | // scrollUp: () => { 200 | // console.log('up') 201 | // }, 202 | // scrollDown: () => { 203 | // console.log('down') 204 | // }, 205 | // scrollMinY: () => { 206 | // console.log('top') 207 | // }, 208 | // scrollMaxY: () => { 209 | // console.log('bottom') 210 | // }, 211 | // scrollLeft: () => { 212 | // console.log('left') 213 | // }, 214 | // scrollRight: () => { 215 | // console.log('right') 216 | // }, 217 | // scrollMinX: () => { 218 | // console.log('beginning') 219 | // }, 220 | // scrollMaxX: () => { 221 | // console.log('endX') 222 | // }, 223 | // }, 224 | // }) 225 | 226 | // 227 | // 228 | // 229 | // 230 | // 231 | // 232 | // 233 | // 234 | // 235 | // 236 | // 237 | // 238 | // // add your own events! if you do tho, you'll have to pick up your own trash tho 239 | // teardownV.addEventListener('click', () => { 240 | // detectScroll.destroy() 241 | // console.log('teardown') 242 | // }) 243 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EGSTAD • Detect Theme 7 | 8 | 12 | 13 | 14 | 15 |
16 |
17 | window 18 | is not scrolling 19 | 20 |
21 |
22 | x:0 23 | y:0 24 |
25 |
26 |
27 |
28 |
29 | DetectScroll.js is a performant and 30 | lightweight ES6 module for detecting scroll activity. 31 | GITHUB 36 | Created by 37 | EGSTAD 38 |
39 |
40 |
41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /example/index.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --background: black; 3 | --foreground: white; 4 | } 5 | 6 | * { 7 | box-sizing: border-box; 8 | } 9 | 10 | html, 11 | body { 12 | width: 100%; 13 | height: 100%; 14 | min-height: 620vh; 15 | background: var(--background); 16 | color: var(--foreground); 17 | position: relative; 18 | font-family: 'MS Gothic', 'Nanum Gothic Coding', monospace; 19 | font-size: clamp(1em, 3vmin, 2em); 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | .tip { 25 | width: 100%; 26 | padding: 0.6em 0.4em; 27 | padding-top: 0.75em; 28 | display: flex; 29 | justify-content: space-between; 30 | z-index: 10; 31 | text-transform: uppercase; 32 | mix-blend-mode: exclusion; 33 | } 34 | 35 | .tip.window { 36 | position: fixed; 37 | } 38 | 39 | .grid { 40 | display: grid; 41 | width: 100%; 42 | } 43 | 44 | .grid.v { 45 | height: 400vh; 46 | grid-template-columns: repeat(12, 1fr); 47 | } 48 | 49 | .grid.v .item { 50 | background: red; 51 | border: 1px solid black; 52 | } 53 | .poster { 54 | width: 100%; 55 | min-height: 100vh; 56 | position: sticky; 57 | top: 0; 58 | left: 0; 59 | // background: conic-gradient(from 0deg, red, orange, yellow, green, blue); 60 | background: conic-gradient( 61 | from 0deg, 62 | #101115, 63 | #298dd9, 64 | #dee4ca, 65 | #f7bf46, 66 | #ef1a03 67 | ); 68 | } 69 | .poster .scroll { 70 | padding: 10vmin 0.6rem 0.4rem; 71 | padding-top: 10vmin; 72 | /* left: 50%; 73 | transform: translate3d(-50%, -50%, 0); */ 74 | } 75 | 76 | .pill { 77 | background: white; 78 | color: black; 79 | line-height: 1; 80 | padding: 2px 4px; 81 | } 82 | 83 | .hori { 84 | position: fixed; 85 | bottom: 0; 86 | left: 0; 87 | width: 100%; 88 | overflow: auto; 89 | white-space: nowrap; 90 | mix-blend-mode: exclusion; 91 | } 92 | 93 | .poster .tip { 94 | position: relative; 95 | bottom: 12vmin; 96 | left: 0; 97 | } 98 | 99 | .hori::-webkit-scrollbar { 100 | display: none; 101 | } 102 | 103 | .hori .item { 104 | font-size: 13.5vmin; 105 | display: inline-block; 106 | padding: 0 0.6rem; 107 | transform: translateY(0.01em); 108 | font-family: 'Arial'; 109 | letter-spacing: -0.04em; 110 | } 111 | 112 | .hori a { 113 | color: inherit; 114 | text-decoration: none; 115 | background: white; 116 | color: black; 117 | padding: 0 0.1em; 118 | 119 | &:focus-visible { 120 | animation: blink 2s infinite ease-in-out; 121 | } 122 | } 123 | 124 | .blink { 125 | animation: blink 2s infinite ease-in-out; 126 | } 127 | 128 | @keyframes blink { 129 | 0%, 130 | 90%, 131 | 100% { 132 | opacity: 0.4; 133 | } 134 | 45%, 135 | 50%, 136 | 55% { 137 | opacity: 1; 138 | } 139 | } 140 | -------------------------------------------------------------------------------- /example/src/UpdateDirection.js: -------------------------------------------------------------------------------- 1 | export function updateDirection(el, direction) { 2 | el.innerText = direction 3 | } 4 | -------------------------------------------------------------------------------- /example/src/UpdateState.js: -------------------------------------------------------------------------------- 1 | export default function updateState(el, position) { 2 | if (el.innerText !== position) { 3 | // eslint-disable-next-line no-param-reassign 4 | el.innerText = position 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { getEl } from './src/getElement' 2 | import { eventsSetup, eventsInit, eventsDestroy } from './src/events' 3 | 4 | export default class DetectScroll { 5 | constructor( 6 | el, 7 | { 8 | horizontal = true, 9 | vertical = true, 10 | debugMode = false, 11 | events = undefined, 12 | } = {} 13 | ) { 14 | this.el = getEl(el) 15 | this.x = this.getX() 16 | this.y = this.getY() 17 | this.lastDispatch = null 18 | this.hasScrolled = false 19 | this.isWindow = window === el 20 | this.isScrolling = undefined 21 | this.isVertical = vertical 22 | this.isHorizontal = horizontal 23 | this.rafId = null 24 | this.rafTick = 0 25 | this.rafKilled = false 26 | this.timeout = null 27 | this.destroy = this.destroy.bind(this) 28 | this.onScroll = this.onScroll.bind(this) 29 | this.events = eventsSetup(events, this.isVertical, this.isHorizontal) 30 | this.debugMode = debugMode 31 | this.hasInit = 0 32 | this.destroyed = null 33 | this.passiveMode = true 34 | this.scrollingU = 0 35 | this.scrollingD = 0 36 | this.scrollingL = 0 37 | this.scrollingR = 0 38 | 39 | this.init() 40 | } 41 | 42 | init() { 43 | // fetch x&y 44 | if (this.isHorizontal) this.getX() 45 | if (this.isVertical) this.getY() 46 | 47 | // defines custom events to dispatch 48 | eventsInit(this.el, this.events) 49 | 50 | // main scroll event that informs everything 51 | this.el.addEventListener('scroll', this.onScroll, { 52 | passive: this.passiveMode, 53 | }) 54 | 55 | // show dispatched events 56 | if (this.debugMode && process.env.NODE_ENV === 'development') { 57 | console.group('Detect Scroll Debugger') 58 | console.log('Element', this.el) 59 | console.log('Events', this.events) 60 | console.groupEnd() 61 | } 62 | 63 | // watch for changes 64 | this.watchScrollPosition() 65 | 66 | // reset value if destroyed 67 | this.destroyed = 0 68 | this.hasInit = 1 69 | } 70 | 71 | destroy() { 72 | // remove scroll event + timeout + custom events 73 | this.el.removeEventListener('scroll', this.onScroll, { 74 | passive: this.passiveMode, 75 | }) 76 | // remove custom events 77 | eventsDestroy(this.el, this.events) 78 | // remove timeout (in case teardown fires mid-scroll) 79 | window.clearTimeout(this.timeout) 80 | // remove raf 81 | window.cancelAnimationFrame(this.rafId) 82 | this.rafKilled = true 83 | this.events = undefined 84 | this.destroyed = 1 85 | this.hasInit = 0 86 | } 87 | 88 | scrollTimeout() { 89 | this.timeout = setTimeout(() => { 90 | this.onScrollEnd() 91 | }, 120) 92 | } 93 | 94 | watchScrollPosition() { 95 | if (this.isHorizontal) this.watchX() 96 | if (this.isVertical) this.watchY() 97 | } 98 | 99 | getY() { 100 | return this.isWindow ? window.scrollY : this.el.scrollTop 101 | } 102 | 103 | getYMax() { 104 | let max = null 105 | 106 | if (this.isWindow) { 107 | max = Math.max( 108 | document.body.scrollHeight, 109 | document.documentElement.scrollHeight, 110 | document.body.offsetHeight, 111 | document.documentElement.offsetHeight, 112 | document.documentElement.clientHeight 113 | ) 114 | } else { 115 | max = Math.max( 116 | this.el.scrollHeight, 117 | this.el.offsetHeight, 118 | this.el.clientHeight 119 | ) 120 | } 121 | 122 | return max - window.innerHeight 123 | } 124 | 125 | isMaxY() { 126 | return this.getY() >= this.getYMax() 127 | } 128 | 129 | isMinY() { 130 | return this.getY() <= 0 131 | } 132 | 133 | getX() { 134 | return this.isWindow ? window.scrollX : this.el.scrollLeft 135 | } 136 | 137 | getXMax() { 138 | let max = null 139 | 140 | if (this.isWindow) { 141 | max = Math.max( 142 | document.body.scrollWidth, 143 | document.documentElement.scrollWidth, 144 | document.body.offsetWidth, 145 | document.documentElement.offsetWidth, 146 | document.documentElement.clientWidth 147 | ) 148 | } else { 149 | max = Math.max( 150 | this.el.scrollWidth, 151 | this.el.offsetWidth, 152 | this.el.clientWidth 153 | ) 154 | } 155 | 156 | return max - window.innerWidth 157 | } 158 | 159 | isMaxX() { 160 | return this.getX() >= this.getXMax() 161 | } 162 | 163 | isMinX() { 164 | return this.getX() <= 0 165 | } 166 | 167 | watchX() { 168 | const x = this.getX() 169 | const scrolling = x !== this.x 170 | const scrollingLeft = x < this.x 171 | const scrollingRight = x > this.x 172 | const atEnd = x !== this.x && this.isMaxX() 173 | const atStart = x !== this.x && this.isMinX() 174 | 175 | this.x = x 176 | 177 | if (scrolling) { 178 | this.onScrollStart() 179 | 180 | if (scrollingLeft && !this.scrollingL) { 181 | this.dispatch('scrollLeft') 182 | this.scrollingL = 1 183 | this.scrollingR = 0 184 | } else if (scrollingRight && !this.scrollingR) { 185 | this.dispatch('scrollRight') 186 | this.scrollingL = 0 187 | this.scrollingR = 1 188 | } 189 | } 190 | 191 | if (atStart) this.dispatch('scrollMinX') 192 | if (atEnd) this.dispatch('scrollMaxX') 193 | if (this.x) this.dispatch('scrollX') 194 | } 195 | 196 | watchY() { 197 | const y = this.getY() 198 | const scrolling = y !== this.y 199 | const scrollingUp = y < this.y 200 | const scrollingDown = y > this.y 201 | const atEnd = y !== this.y && this.isMaxY() 202 | const atStart = y !== this.y && this.isMinY() 203 | 204 | this.y = y 205 | 206 | if (scrolling) { 207 | this.onScrollStart() 208 | 209 | if (scrollingDown && !this.scrollingD) { 210 | this.dispatch('scrollDown') 211 | this.scrollingD = 1 212 | this.scrollingU = 0 213 | } else if (scrollingUp && !this.scrollingU) { 214 | this.dispatch('scrollUp') 215 | this.scrollingD = 0 216 | this.scrollingU = 1 217 | } 218 | } 219 | 220 | if (atStart) this.dispatch('scrollMinY') 221 | if (atEnd) this.dispatch('scrollMaxY') 222 | if (this.y) this.dispatch('scrollY') 223 | } 224 | 225 | dispatch(type) { 226 | const isValidOverride = 227 | typeof this.events === 'object' && type in this.events 228 | const isValidDefault = 229 | Array.isArray(this.events) && this.events.includes(type) 230 | const unthrottledEvents = ['scrollX', 'scrollY'] 231 | const eventNotDuplicated = this.lastDispatch !== type 232 | 233 | // start/stop/direction events fire only once 234 | if (eventNotDuplicated && (isValidOverride || isValidDefault)) { 235 | this.el.dispatchEvent( 236 | new CustomEvent(type, { 237 | detail: { 238 | x: this.x, 239 | y: this.y, 240 | }, 241 | }) 242 | ) 243 | this.lastDispatch = type 244 | 245 | if (this.debugMode) console.info(type) 246 | } 247 | 248 | // updates to x or y fire each time 249 | if (unthrottledEvents.includes(type)) { 250 | this.el.dispatchEvent( 251 | new CustomEvent(type, { 252 | detail: { 253 | x: this.x, 254 | y: this.y, 255 | }, 256 | }) 257 | ) 258 | 259 | if (this.debugMode) console.info(type) 260 | } 261 | } 262 | 263 | onScroll() { 264 | if (this.rafKilled) return 265 | 266 | this.rafId = window.requestAnimationFrame(() => { 267 | this.watchScrollPosition() 268 | 269 | // refresh timeout, watch for scroll stop 270 | window.clearTimeout(this.timeout) 271 | this.scrollTimeout() 272 | }) 273 | } 274 | 275 | onScrollStart() { 276 | if (!this.isScrolling && this.hasInit) { 277 | this.dispatch('scrollStart') 278 | this.isScrolling = true 279 | } 280 | this.hasScrolled = 1 281 | } 282 | 283 | onScrollEnd() { 284 | this.dispatch('scrollStop') 285 | this.isScrolling = false 286 | this.scrollingU = false 287 | this.scrollingD = false 288 | this.scrollingL = false 289 | this.scrollingR = false 290 | } 291 | } 292 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@egstad/detect-scroll", 3 | "version": "1.0.10", 4 | "description": "A performant and lightweight ES6 module for detecting scroll activity (direction + location) for X and/or Y axis", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "parcel ./example/index.html", 8 | "test": "jest --watchAll", 9 | "test:coverage": "jest --coverage", 10 | "test:badges": "npm run test:coverage && jest-coverage-badges", 11 | "prepublish": "npm run test:badges; npm run build", 12 | "build": "npm run build:example", 13 | "build:example": "parcel build ./example/index.html --public-url='./' --out-dir ./docs" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/egstad-construct/detect-scroll.git" 18 | }, 19 | "keywords": [ 20 | "Custom Scroll Event Listeners", 21 | "Scroll Direction", 22 | "Scroll Events", 23 | "Scroll", 24 | "Event", 25 | "Custom Event", 26 | "Request Animation Frame", 27 | "Performant Scrolling", 28 | "es6", 29 | "module" 30 | ], 31 | "author": "Jordan Egstad", 32 | "license": "MIT", 33 | "bugs": { 34 | "url": "https://github.com/egstad-construct/detect-scroll/issues" 35 | }, 36 | "homepage": "https://github.com/egstad-construct/detect-scroll#readme", 37 | "devDependencies": { 38 | "@babel/core": "^7.14.8", 39 | "eslint": "^7.31.0", 40 | "eslint-config-airbnb-base": "^14.2.1", 41 | "eslint-config-prettier": "^8.3.0", 42 | "eslint-plugin-import": "^2.22.1", 43 | "eslint-plugin-prettier": "^3.4.0", 44 | "jest": "^27.0.6", 45 | "jest-coverage-badges": "^1.1.2", 46 | "parcel-bundler": "^1.12.5", 47 | "prettier": "^2.3.2", 48 | "sass": "^1.35.2" 49 | }, 50 | "jest": { 51 | "verbose": true, 52 | "testURL": "http://localhost:1234/", 53 | "coverageReporters": [ 54 | "json-summary", 55 | "text", 56 | "lcov" 57 | ], 58 | "collectCoverageFrom": [ 59 | "src/events.js", 60 | "src/getElement.js" 61 | ] 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/events.js: -------------------------------------------------------------------------------- 1 | const eventsDefault = ['scrollStart', 'scrollStop'] 2 | const eventsVertical = [ 3 | 'scrollX', 4 | 'scrollUp', 5 | 'scrollDown', 6 | 'scrollMinY', 7 | 'scrollMaxY', 8 | ] 9 | const eventsHorizontal = [ 10 | 'scrollY', 11 | 'scrollLeft', 12 | 'scrollRight', 13 | 'scrollMinX', 14 | 'scrollMaxX', 15 | ] 16 | 17 | export function eventsSetup(eventOverrides, isVertical, isHorizontal) { 18 | // if overrides exist 19 | if (eventOverrides && typeOf(eventOverrides)) { 20 | return eventOverrides 21 | } 22 | // if overrides are an invalid format 23 | else if (eventOverrides && !typeOf(eventOverrides)) { 24 | // console.error(`Whoops! 'events' must be an object with at least one prop.`) 25 | return 26 | } 27 | // defaults 28 | else { 29 | return [ 30 | ...eventsDefault, 31 | ...(isVertical ? eventsVertical : []), 32 | ...(isHorizontal ? eventsHorizontal : []), 33 | ] 34 | } 35 | } 36 | 37 | export function eventsInit(element, events) { 38 | if (typeOf(events)) { 39 | Object.entries(events).forEach((event) => { 40 | const [key, value] = event 41 | element.addEventListener(key, value, false) 42 | }) 43 | } 44 | } 45 | 46 | export function eventsDestroy(element, events) { 47 | if (typeOf(events)) { 48 | Object.entries(events).forEach((event) => { 49 | const [key, value] = event 50 | element.removeEventListener(key, value, false) 51 | }) 52 | } 53 | } 54 | 55 | function typeOf(events) { 56 | return ( 57 | typeof events === 'object' && 58 | Object.keys(events).length > 0 && 59 | !Array.isArray(events) 60 | ) 61 | } 62 | -------------------------------------------------------------------------------- /src/events.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | import detectScroll from '../index' 6 | import { eventsSetup, eventsInit } from './events' 7 | 8 | // is it an array with at least one event 9 | test('Properly defines EventsSetup defaults', () => { 10 | // defaults 11 | let eventOverrides = null 12 | let isVertical = true 13 | let isHorizontal = false 14 | 15 | // try with event overrides 16 | const overrides = new detectScroll(window, { 17 | events: { 18 | onScroll: () => { 19 | isWorking = 1 20 | }, 21 | }, 22 | }) 23 | expect(Object.keys(overrides.events)[0]).toBe('onScroll') 24 | 25 | // try with an empty object 26 | const overridesFail = new detectScroll(window, { 27 | events: {}, 28 | }) 29 | expect(overridesFail.events).toBe(undefined) 30 | 31 | // const scrollDetect = new detectScroll(window) 32 | expect( 33 | eventsSetup(eventOverrides, isVertical, isHorizontal).length 34 | ).toBeGreaterThan(0) 35 | }) 36 | 37 | test('Properly runs eventsInit', () => { 38 | const instance = new detectScroll(global.window, { 39 | events: { 40 | onScrollStart: () => { 41 | console.log('hi') 42 | }, 43 | }, 44 | }) 45 | 46 | expect(Object.keys(instance.events).length).toBeGreaterThan(0) 47 | instance.destroy() 48 | expect(instance.events).toBe(undefined) 49 | }) 50 | -------------------------------------------------------------------------------- /src/getElement.js: -------------------------------------------------------------------------------- 1 | export function getEl(el) { 2 | let element = null 3 | 4 | if (isElement(el) || el === window) { 5 | element = el 6 | } else if (typeof el === 'string') { 7 | element = document.querySelector(el) 8 | } 9 | 10 | return element 11 | } 12 | 13 | // Returns true if it is a DOM element 14 | function isElement(o) { 15 | return typeof HTMLElement === 'object' 16 | ? o instanceof HTMLElement 17 | : o && 18 | typeof o === 'object' && 19 | o !== null && 20 | o.nodeType === 1 && 21 | typeof o.nodeName === 'string' 22 | } 23 | -------------------------------------------------------------------------------- /src/getElement.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | import { getEl } from './getElement' 6 | 7 | test('Properly runs getEl', () => { 8 | // create a mock element 9 | const body = global.document.querySelector('body') 10 | const div = global.document.createElement('div') 11 | div.classList.add('container') 12 | body.appendChild(div) 13 | 14 | // try window element 15 | expect(getEl(window)).toBe(window) 16 | 17 | // try html element 18 | expect(getEl(div).tagName).toBe('DIV') 19 | expect(getEl(div).classList.contains('container')) 20 | 21 | // try string element 22 | expect(getEl('.container').tagName).toBe('DIV') 23 | }) 24 | --------------------------------------------------------------------------------