perfect-scrollbar icon indicating copy to clipboard operation
perfect-scrollbar copied to clipboard

Not Updating with inner components

Open Neptuniam opened this issue 6 years ago • 2 comments

I am using the vue-custom-scrollbar component in a vue project of mine and have encountered an issue. If I use the scrollbar to scroll down and the content inside the component changes and the scrollbar is no longer needed it doesn't update until the user scrolls manually. Is there a way to trigger an update to make it realize the scrollbar isn't needed so I can see the remaining content again?

Neptuniam avatar Jun 27 '19 23:06 Neptuniam

I tried to make a change to the scroll bars settings to force an update and that works but causes the scroll bar to behave improperly so that isn't really a fix

Neptuniam avatar Jun 27 '19 23:06 Neptuniam

i'm using a self made directive

Vue.directive('perfect-scroll', {
	bind(el, binding){
		var options = {}
		if(binding.value)
			options = binding.value

		el.dataset.perfectScroll = uniqid()
		// console.log('bind', el)
		// otherwise will put the scrollbar on the left instead of right
		setTimeout(() => perfectScrollbars[el.dataset.perfectScroll] = new PerfectScrollbar(el, options), 0)
	},
	componentUpdated(el){
		// console.log('componentUpdated', el)
		if(_.has(el.dataset, 'perfectScroll') && perfectScrollbars[el.dataset.perfectScroll])
			return perfectScrollbars[el.dataset.perfectScroll].update()
	},
	unbind(el){
		// console.log('unbind', el)
		if(_.has(el.dataset, 'perfectScroll') && perfectScrollbars[el.dataset.perfectScroll]){
			perfectScrollbars[el.dataset.perfectScroll].destroy()
			perfectScrollbars[el.dataset.perfectScroll] = null
			delete perfectScrollbars[el.dataset.perfectScroll]
			delete el.dataset.perfectScroll
		}
	}
})
<div class="messages" v-perfect-scroll="{ suppressScrollX: true }" ref="messagesList" v-on:ps-scroll-y="messagesScrolled">
    <div class="holder">
        // .... childs
    </div>
</div>

zecar avatar Jul 02 '19 09:07 zecar