尝试修复滚动占位
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@hoc-element/affix",
|
"name": "@hoc-element/affix",
|
||||||
"version": "0.0.2",
|
"version": "0.0.3",
|
||||||
"main": "lib/hoc-el-affix.js",
|
"main": "lib/hoc-el-affix.js",
|
||||||
"description": "📌 Affix 将页面元素固定在可视范围内。",
|
"description": "📌 Affix 将页面元素固定在可视范围内。",
|
||||||
"author": "Wisdom <pdsu.wwz@foxmail.com>",
|
"author": "Wisdom <pdsu.wwz@foxmail.com>",
|
||||||
|
|||||||
@@ -1,4 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
v-if="showPlaceHolder"
|
||||||
|
:style="stylePlaceHolder"
|
||||||
|
></div>
|
||||||
<div
|
<div
|
||||||
ref="scroll-affix"
|
ref="scroll-affix"
|
||||||
:style="affixStyle"
|
:style="affixStyle"
|
||||||
@@ -6,6 +11,7 @@
|
|||||||
>
|
>
|
||||||
<slot/>
|
<slot/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -23,6 +29,10 @@ export default {
|
|||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 'initial'
|
top: 'initial'
|
||||||
},
|
},
|
||||||
|
stylePlaceHolder: {
|
||||||
|
|
||||||
|
},
|
||||||
|
showPlaceHolder: false,
|
||||||
instance: '',
|
instance: '',
|
||||||
defaultInstancePosition: ''
|
defaultInstancePosition: ''
|
||||||
}
|
}
|
||||||
@@ -44,7 +54,9 @@ export default {
|
|||||||
},
|
},
|
||||||
createAffix () {
|
createAffix () {
|
||||||
this.defaultInstancePosition = this.getInstanceRect().top
|
this.defaultInstancePosition = this.getInstanceRect().top
|
||||||
|
|
||||||
this.beforeListener()
|
this.beforeListener()
|
||||||
|
|
||||||
document.addEventListener('scroll', this.scrollListener)
|
document.addEventListener('scroll', this.scrollListener)
|
||||||
},
|
},
|
||||||
setFixedForInstance () {
|
setFixedForInstance () {
|
||||||
@@ -53,21 +65,38 @@ export default {
|
|||||||
top: `${this.offsetTop}px`
|
top: `${this.offsetTop}px`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
setPlaceHolder () {
|
||||||
|
const instanceRect = this.getInstanceRect()
|
||||||
|
this.stylePlaceHolder = {
|
||||||
|
width: instanceRect.width,
|
||||||
|
height: instanceRect.height,
|
||||||
|
}
|
||||||
|
},
|
||||||
beforeListener () {
|
beforeListener () {
|
||||||
if (this.defaultInstancePosition < this.offsetTop) {
|
if (this.defaultInstancePosition < this.offsetTop) {
|
||||||
this.setFixedForInstance()
|
this.setFixedForInstance()
|
||||||
|
|
||||||
|
this.showPlaceHolder = true
|
||||||
|
|
||||||
|
this.setPlaceHolder()
|
||||||
}
|
}
|
||||||
|
|
||||||
this.defaultInstancePosition = this.getWindowScrollTop() + this.defaultInstancePosition
|
this.defaultInstancePosition = this.getWindowScrollTop() + this.defaultInstancePosition
|
||||||
},
|
},
|
||||||
scrollListener () {
|
scrollListener () {
|
||||||
const offsetTop = this.getInstanceRect().top
|
const offsetTop = this.getInstanceRect().top
|
||||||
const windowScrollTop = this.getWindowScrollTop()
|
|
||||||
if (offsetTop <= this.offsetTop) {
|
if (offsetTop <= this.offsetTop) {
|
||||||
this.setFixedForInstance()
|
this.setFixedForInstance()
|
||||||
|
|
||||||
|
this.setPlaceHolder()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const windowScrollTop = this.getWindowScrollTop()
|
||||||
const isArrivalDefault = (this.defaultInstancePosition - this.offsetTop) >= windowScrollTop
|
const isArrivalDefault = (this.defaultInstancePosition - this.offsetTop) >= windowScrollTop
|
||||||
|
|
||||||
if (isArrivalDefault && this.affixStyle.position === 'fixed') {
|
if (isArrivalDefault && this.affixStyle.position === 'fixed') {
|
||||||
this.affixStyle = {}
|
this.affixStyle = {}
|
||||||
|
this.stylePlaceHolder = {}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
version: '0.0.2',
|
version: '0.0.3',
|
||||||
install,
|
install,
|
||||||
HocElAffix
|
HocElAffix
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user