Skip to content

Commit 0ec4845

Browse files
simplesmilerAkryum
authored andcommitted
Support scroll parent other than window (#67)
* Add demo for page mode with scroll parent * Rename methods more appropriately * Listen for scroll event on scrollparent, make sure component is recreated when scrollparent changes
1 parent 618098a commit 0ec4845

File tree

3 files changed

+44
-10
lines changed

3 files changed

+44
-10
lines changed

docs-src/src/App.vue

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<div
33
id="app"
44
:class="{
5-
'page-mode': pageMode
5+
'page-mode': pageMode,
6+
'full-page': pageModeFullPage,
67
}"
78
>
89
<div class="toolbar">
@@ -16,6 +17,9 @@
1617
<label>
1718
<input v-model="pageMode" type="checkbox" /> page mode
1819
</label>
20+
<label v-if="pageMode">
21+
<input v-model="pageModeFullPage" type="checkbox" /> full page
22+
</label>
1923
<span>
2024
<input v-model.number="buffer" type="number" min="1" max="500000" /> buffer
2125
</span>
@@ -35,6 +39,7 @@
3539
<!-- Scoped slots -->
3640
<virtual-scroller
3741
v-if="scopedSlots"
42+
:key="pageModeFullPage"
3843
class="scroller"
3944
:item-height="itemHeight"
4045
:items="list"
@@ -62,6 +67,7 @@
6267
<!-- Renderers -->
6368
<virtual-scroller
6469
v-else
70+
:key="pageModeFullPage"
6571
class="scroller"
6672
:item-height="itemHeight"
6773
:items="list"
@@ -78,6 +84,7 @@
7884

7985
<template v-else>
8086
<recycle-list
87+
:key="pageModeFullPage"
8188
ref="scroller"
8289
class="scroller"
8390
:items="list"
@@ -135,6 +142,7 @@ export default {
135142
poolSize: 2000,
136143
enableLetters: true,
137144
pageMode: false,
145+
pageModeFullPage: true,
138146
recycleList: true,
139147
}),
140148
@@ -232,6 +240,10 @@ body {
232240
height: 100%;
233241
}
234242
243+
#app.page-mode:not(.full-page) {
244+
height: 100%;
245+
}
246+
235247
.toolbar {
236248
flex: auto 0 0;
237249
text-align: center;
@@ -257,6 +269,10 @@ body {
257269
position: relative;
258270
}
259271
272+
#app.page-mode:not(.full-page) .content {
273+
overflow: auto;
274+
}
275+
260276
#app:not(.page-mode) .wrapper {
261277
overflow: hidden;
262278
position: absolute;

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
"vue-template-compiler": "^2.2.5"
6363
},
6464
"dependencies": {
65+
"scrollparent": "^2.0.1",
6566
"vue-observe-visibility": "^0.3.1",
6667
"vue-resize": "^0.4.2"
6768
}

src/mixins/scroller.js

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ResizeObserver } from 'vue-resize'
22
import { ObserveVisibility } from 'vue-observe-visibility'
3+
import ScrollParent from 'scrollparent'
34
import { supportsPassive } from '../utils'
45

56
// @vue/component
@@ -79,10 +80,19 @@ export default {
7980
},
8081

8182
beforeDestroy () {
82-
this.removeWindowScroll()
83+
this.removeListeners()
8384
},
8485

8586
methods: {
87+
88+
getListenerTarget () {
89+
let target = ScrollParent(this.$el)
90+
if (target === window.document.documentElement) {
91+
target = window
92+
}
93+
return target
94+
},
95+
8696
getScroll () {
8797
const el = this.$el
8898
let scroll
@@ -118,22 +128,29 @@ export default {
118128

119129
applyPageMode () {
120130
if (this.pageMode) {
121-
this.addWindowScroll()
131+
this.addListeners()
122132
} else {
123-
this.removeWindowScroll()
133+
this.removeListeners()
124134
}
125135
},
126136

127-
addWindowScroll () {
128-
window.addEventListener('scroll', this.handleScroll, supportsPassive ? {
137+
addListeners () {
138+
this.listenerTarget = this.getListenerTarget()
139+
this.listenerTarget.addEventListener('scroll', this.handleScroll, supportsPassive ? {
129140
passive: true,
130141
} : false)
131-
window.addEventListener('resize', this.handleResize)
142+
this.listenerTarget.addEventListener('resize', this.handleResize)
132143
},
133144

134-
removeWindowScroll () {
135-
window.removeEventListener('scroll', this.handleScroll)
136-
window.removeEventListener('resize', this.handleResize)
145+
removeListeners () {
146+
if (!this.listenerTarget) {
147+
return
148+
}
149+
150+
this.listenerTarget.removeEventListener('scroll', this.handleScroll)
151+
this.listenerTarget.removeEventListener('resize', this.handleResize)
152+
153+
this.listenerTarget = null
137154
},
138155

139156
scrollToItem (index) {

0 commit comments

Comments
 (0)