vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fix #4689 - ScrollPanel: TypeError: Cannot read properties of null (reading 'scrollWidth')

pull/4696/head
FlipWarthog 2023-10-25 18:28:41 -04:00
parent 12333edd7c
commit 4fb793a33c
1 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
components/lib/scrollpanel/ScrollPanel.vue
View File

@ -103,39 +103,41 @@ export default {
} }
}, },
moveBar() { moveBar() {
/* horizontal scroll */ if (this.$refs.content) {
let totalWidth = this.$refs.content.scrollWidth; /* horizontal scroll */
let ownWidth = this.$refs.content.clientWidth; let totalWidth = this.$refs.content.scrollWidth;
let bottom = (this.$el.clientHeight - this.$refs.xBar.clientHeight) * -1; let ownWidth = this.$refs.content.clientWidth;
let bottom = (this.$el.clientHeight - this.$refs.xBar.clientHeight) * -1;
this.scrollXRatio = ownWidth / totalWidth; this.scrollXRatio = ownWidth / totalWidth;
/* vertical scroll */ /* vertical scroll */
let totalHeight = this.$refs.content.scrollHeight; let totalHeight = this.$refs.content.scrollHeight;
let ownHeight = this.$refs.content.clientHeight; let ownHeight = this.$refs.content.clientHeight;
let right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1; let right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
this.scrollYRatio = ownHeight / totalHeight; this.scrollYRatio = ownHeight / totalHeight;
this.frame = this.requestAnimationFrame(() => { this.frame = this.requestAnimationFrame(() => {
if (this.scrollXRatio >= 1) { if (this.scrollXRatio >= 1) {
this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true'); this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden'); !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
} else { } else {
this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false'); this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden'); !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;'; this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
} }
if (this.scrollYRatio >= 1) { if (this.scrollYRatio >= 1) {
this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true'); this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden'); !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
} else { } else {
this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false'); this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden'); !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;'; this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
} }
}); });
}
}, },
onYBarMouseDown(e) { onYBarMouseDown(e) {
this.isYBarClicked = true; this.isYBarClicked = true;