├── .editorconfig
├── .gitignore
├── .npmignore
├── README.md
├── examples
├── dist
│ └── simple
│ │ ├── index.html
│ │ ├── index.js
│ │ └── index.js.map
└── src
│ └── simple
│ ├── App.vue
│ ├── index.html
│ └── main.js
├── package.json
├── rollup.config.base.js
├── rollup.config.dist.js
├── rollup.config.js
├── src
├── index.js
├── utils
│ └── helpers.js
└── vue-scrollmonitor.js
└── yarn.lock
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | /dist/
4 | tmp/
5 | npm-debug.log
6 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | /tmp/
5 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # VueScrollmonitor
2 | > Handle scroll events like a boss
3 |
4 | Wrapper to use the awesome scrollMonitor with Vue@2.4.x
5 |
6 | To know more : [https://github.com/stutrek/scrollMonitor](https://github.com/stutrek/scrollMonitor)
7 |
8 |
9 | ### Demos
10 | [Simple example](https://htmlpreview.github.io/?https://raw.githubusercontent.com/AlexandreBonaventure/vue-scrollmonitor/dev/examples/dist/simple/index.html)
11 | see source : [here](https://github.com/AlexandreBonaventure/vue-scrollmonitor/tree/dev/examples/src/simple)
12 |
13 | ### Installation
14 | ```
15 | npm install vue-scrollmonitor
16 |
17 | // or
18 |
19 | yarn add vue-scrollmonitor
20 | ```
21 |
22 | ### Usage
23 | VueScrollMonitor relies on two components. So in order to use it, you have two choices:
24 | #### Use the plugin
25 | It will register the components globally so you'll be able to leverage the plugin in every components.
26 | ```
27 | import VueScrollMonitor from 'vue-scrollmonitor'
28 | Vue.use(VueScrollMonitor)
29 | ```
30 |
31 |
32 | #### or registering components directly
33 | Otherwise fell free to import and register manually the two plugins.
34 | ```
35 | import { ScrollContainer, ScrollItem } from 'vue-scrollmonitor'
36 | // then, in component definition:
37 | {
38 | name: 'MyComponent',
39 | components: {
40 | ScrollContainer,
41 | ScrollItem,
42 | }
43 | }
44 | ```
45 |
46 | ### Doc
47 | [see source of example for recipes]()
48 | To track items with ScrollItem component you'll need to wrap them in a ScrollContainer component.
49 |
50 | #### ScrollContainer
51 | ---
52 | ##### Props
53 | __container__ :DOMElement
54 | By default, ScrollContainer will listen to scroll events emitted from HTML body, but you can setup another DOM element to watch for scrolling event. [see also](https://github.com/stutrek/scrollMonitor#when-the-body-scrolls)
55 |
56 | ---
57 | ##### Events
58 | __change__ => Object
59 | Every time scrollMonitor updates, it will fire a change event transporting the state of tracked items (aka all ScrollItem components children of this container).
60 |
61 | One common pattern is to retrieve the state in the parent component (or register it in Vuex state for example) listening to this event. That way you can have access the state in the template easily.
62 |
63 | The state is an index following this structure:
64 | ```
65 | {
66 | id: {
67 | isAboveViewport: Boolean,
68 | isBelowViewport: Boolean,
69 | isInViewport: Boolean,
70 | isFullyInViewport: Boolean,
71 | }
72 | ...
73 | }
74 | ```
75 |
76 | #### ScrollItem
77 |
78 | ---
79 | ##### Props
80 |
81 | __id__ :String|Number
82 | *default: random uid*
83 | Id is required to keep track of each item watcher & state. You can pass your own id as long as you make sure it is unique for each ScrollItem in a ScrollContainer component.
84 |
85 | __lock__ :Boolean
86 | *default: false*
87 | [see](https://github.com/stutrek/scrollMonitor#locking)
88 |
89 | __offset__ :Number | { top :Number, bottom :Number }
90 | *default: undefined*
91 | [see](https://github.com/stutrek/scrollMonitor#locking)
92 |
93 | ---
94 | ##### Events
95 |
96 | __change__ => Object
97 | same as ScrollContainer but for this item.
98 |
99 | ### License
100 |
101 | MIT © Alexandre Bonaventure
102 |
--------------------------------------------------------------------------------
/examples/dist/simple/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | scrollmonitor-rollup
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/examples/src/simple/App.vue:
--------------------------------------------------------------------------------
1 |
32 |
33 |
34 |
35 |
VueScrollMonitor
36 |
37 |
38 |
39 |
40 |
43 |
44 |
45 |
46 |
47 |
48 | {{ i }}
49 |
50 |
51 |
52 |
54 |
55 |