├── .babelrc ├── .gitignore ├── .editorconfig ├── rollup.config.js ├── package.json ├── license ├── readme.md └── src └── main.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .DS_Store 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 4 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [{*.yml,*.json}] 15 | indent_size = 2 16 | indent_style = space 17 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from 'rollup-plugin-node-resolve'; 2 | import babel from 'rollup-plugin-babel'; 3 | 4 | export default [{ 5 | input: 'src/main.js', 6 | output: [ 7 | { 8 | file: 'dist/main.cjs.js', 9 | format: 'cjs' 10 | }, 11 | { 12 | file: 'dist/main.esm.js', 13 | format: 'esm' 14 | } 15 | ], 16 | plugins: [ 17 | resolve(), 18 | babel({ 19 | exclude: 'node_modules/**' 20 | }) 21 | ] 22 | }]; 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modularscroll", 3 | "version": "1.0.7", 4 | "description": "Dead simple elements in viewport detection.", 5 | "repository": "modularorg/modularscroll", 6 | "author": "Antoine Boulanger (https://antoineboulanger.com)", 7 | "license": "MIT", 8 | "main": "dist/main.cjs.js", 9 | "module": "dist/main.esm.js", 10 | "scripts": { 11 | "build": "rollup -c" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.2.2", 15 | "@babel/preset-env": "^7.2.3", 16 | "rollup": "^1.1.2", 17 | "rollup-plugin-babel": "^4.3.2", 18 | "rollup-plugin-node-resolve": "^4.0.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Antoine Boulanger 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 |

2 | 3 | 4 | 5 |

6 |

modularScroll

7 |

Dead simple elements in viewport detection.

8 | 9 | ## Installation 10 | ```sh 11 | npm install modularscroll 12 | ``` 13 | 14 | ## Why 15 | - Simple 16 | - Lightweight 17 | - High performance 18 | - No dependencies 19 | 20 | ## Usage 21 | ```js 22 | import modularScroll from 'modularscroll'; 23 | 24 | this.scroll = new modularScroll(); 25 | ``` 26 | ```html 27 |

Hello

28 |

Text

29 | ``` 30 | 31 | #### With options 32 | ```js 33 | import modularScroll from 'modularscroll'; 34 | 35 | this.scroll = new modularScroll({ 36 | el: document, 37 | name: 'scroll', 38 | class: 'is-inview', 39 | offset: 0, 40 | repeat: false 41 | }); 42 | ``` 43 | ```html 44 |

Hello

45 |

Text

46 | ``` 47 | 48 | #### With methods 49 | ```js 50 | import modularScroll from 'modularscroll'; 51 | 52 | this.scroll = new modularScroll(); 53 | 54 | this.scroll.update(); 55 | ``` 56 | 57 | #### With events 58 | ```js 59 | import modularScroll from 'modularscroll'; 60 | 61 | this.scroll = new modularScroll(); 62 | 63 | this.scroll.on('call', (func) => { 64 | this.call(...func); // Using modularJS 65 | }); 66 | ``` 67 | ```html 68 |
Trigger
69 | ``` 70 | 71 | ## Options 72 | | Option | Type | Default | Description | 73 | | ------ | ---- | ------- | ----------- | 74 | | `el` | `object` | `document` | Scroll container element. | 75 | | `name` | `string` | `'scroll'` | Data attributes name. | 76 | | `class` | `string` | `'is-inview'` | Elements in-view class. | 77 | | `offset` | `number` | `0` | In-view trigger offset. | 78 | | `repeat` | `boolean` | `false` | Repeat in-view detection. | 79 | 80 | ## Attributes 81 | | Attribute | Values | Description | 82 | | --------- | ------ | ----------- | 83 | | `data-scroll` | | Detect if in-view. | 84 | | `data-scroll-class` | `string` | Element in-view class. | 85 | | `data-scroll-offset` | `number` | Element in-view trigger offset. | 86 | | `data-scroll-repeat` | `true`, `false` | Element in-view detection repeat. | 87 | | `data-scroll-call` | `string` | Element in-view trigger call event. | 88 | 89 | ## Methods 90 | | Method | Description | 91 | | --------- | ----------- | 92 | | `init()` | Reinit the scroll. | 93 | | `update()` | Update elements position. | 94 | | `destroy()` | Destroy the scroll events. | 95 | 96 | ## Events 97 | | Event | Arguments | Description | 98 | | ----- | --------- | ----------- | 99 | | `call` | `func` | Trigger if in-view. Returns your `string` or `array` if contains `,`. | 100 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | export default class { 2 | constructor(options = {}) { 3 | this.defaults = { 4 | el: document, 5 | name: 'scroll', 6 | class: 'is-inview', 7 | offset: 0, 8 | repeat: false 9 | } 10 | 11 | Object.assign(this, this.defaults, options); 12 | 13 | this.namespace = 'modular'; 14 | this.windowHeight = window.innerHeight; 15 | this.els = []; 16 | this.scrollPosition = 0; 17 | this.frame = false; 18 | 19 | this.checkScroll = this.checkScroll.bind(this); 20 | this.checkResize = this.checkResize.bind(this); 21 | 22 | window.addEventListener('scroll', this.checkScroll, false); 23 | window.addEventListener('resize', this.checkResize, false); 24 | 25 | this.init(); 26 | } 27 | 28 | init() { 29 | this.scrollPosition = window.scrollY; 30 | 31 | const els = this.el.querySelectorAll('[data-'+this.name+']'); 32 | 33 | els.forEach((el, i) => { 34 | let cl = el.dataset[this.name + 'Class'] || this.class; 35 | let top = el.getBoundingClientRect().top + this.scrollPosition; 36 | let bottom = top + el.offsetHeight; 37 | let offset = parseInt(el.dataset[this.name + 'Offset']) || parseInt(this.offset); 38 | let repeat = el.dataset[this.name + 'Repeat']; 39 | let call = el.dataset[this.name + 'Call']; 40 | 41 | if(repeat == 'false') { 42 | repeat = false; 43 | } else if (repeat != undefined) { 44 | repeat = true; 45 | } else { 46 | repeat = this.repeat; 47 | } 48 | 49 | this.els[i] = { 50 | el: el, 51 | class: cl, 52 | top: top + offset, 53 | bottom: bottom, 54 | offset: offset, 55 | repeat: repeat, 56 | inView: false, 57 | call: call 58 | } 59 | }); 60 | 61 | this.detectElements(); 62 | } 63 | 64 | update() { 65 | this.updateElements(); 66 | } 67 | 68 | checkScroll() { 69 | if (this.els.length) { 70 | this.scrollPosition = window.scrollY; 71 | 72 | if(!this.frame) { 73 | requestAnimationFrame(() => { 74 | this.detectElements(); 75 | }); 76 | this.frame = true; 77 | } 78 | } 79 | } 80 | 81 | checkResize() { 82 | if (this.els.length) { 83 | this.windowHeight = window.innerHeight; 84 | 85 | if(!this.frame) { 86 | requestAnimationFrame(() => { 87 | this.updateElements(); 88 | }); 89 | this.frame = true; 90 | } 91 | } 92 | } 93 | 94 | detectElements() { 95 | const scrollTop = this.scrollPosition; 96 | const scrollBottom = scrollTop + this.windowHeight; 97 | 98 | this.els.forEach((el, i) => { 99 | if (!el.inView) { 100 | if ((scrollBottom > el.top) && (scrollTop < el.bottom)) { 101 | this.setInView(el, i); 102 | } 103 | } else { 104 | if ((scrollBottom < el.top) || (scrollTop > el.bottom)) { 105 | this.setOutOfView(el, i); 106 | } 107 | } 108 | }); 109 | 110 | this.frame = false; 111 | } 112 | 113 | setInView(el, i) { 114 | if (el.repeat) { 115 | this.els[i].inView = true; 116 | } else { 117 | this.els.splice(i, 1); 118 | } 119 | 120 | el.el.classList.add(el.class); 121 | 122 | if (el.call) { 123 | this.callValue = el.call.split(',').map(item => item.trim()); 124 | if (this.callValue.length == 1) this.callValue = this.callValue[0]; 125 | 126 | const callEvent = new Event(this.namespace + 'call'); 127 | window.dispatchEvent(callEvent); 128 | } 129 | } 130 | 131 | setOutOfView(el, i) { 132 | this.els[i].inView = false; 133 | el.el.classList.remove(el.class); 134 | } 135 | 136 | updateElements() { 137 | this.els.forEach((el, i) => { 138 | const top = el.el.getBoundingClientRect().top + this.scrollPosition; 139 | const bottom = top + el.el.offsetHeight; 140 | 141 | this.els[i].top = top + el.offset; 142 | this.els[i].bottom = bottom; 143 | }); 144 | 145 | this.frame = false; 146 | } 147 | 148 | on(event, func) { 149 | window.addEventListener(this.namespace + event, () => { 150 | switch (event) { 151 | case 'call': 152 | return func(this.callValue); 153 | default: 154 | return func(); 155 | } 156 | }, false); 157 | } 158 | 159 | destroy() { 160 | window.removeEventListener('scroll', this.checkScroll, false); 161 | window.removeEventListener('resize', this.checkResize, false); 162 | } 163 | } 164 | --------------------------------------------------------------------------------