Perfect-scrollbar: .perfectScrollbar("update") not updating scrollbar
Hi,
I have a navigation-panel which uses the perfectScrollbar. After some elements were removed in the navigation the scrollbar should disappear. But for some reasons it still appears, only after scrolling it will disappear. I have ensured that the update call was made, so this could not be the problem. Also I have checked that my elements have the same position and nested divs like in the examples. What could cause this problem?
What fixed my problem for now (no solution for a "perfect" scrollbar): use the destroy-function and init the plugin again instead of using update.
julmot
All 19 comments
Hi,
Actually, destroy-and-init and update do the quite same thing, except for subtle processes to initialise the plugin but nothing about positioning, so I also wonder what makes the problem. I'll appreciate if you will provide some example page or code to reproduce it.
Thanks in advance.
hatashiro
on 1 Oct 2014
Unfortunately I can not reproduce this bug. I am using the scrollbar in a webapp and I can not share this code. But I created a fiddle that contains the part where I have used the plugin. So it must be something I don't think it is relevant.. The working fiddle: http://jsfiddle.net/ff02nct8/
julmot
on 1 Oct 2014
Hmm... I've just checked the fiddle and yes, it works fine. Then I think it can be a timing issue. I suggest checking if the update function is called _after_ the content is updated.
The update function is called when it's being scrolled by mouse wheel. So if it's updated well when scrolling, as you mentioned, it means that update function works fine.
hatashiro
on 1 Oct 2014
I already checked this. I also used the update inside a timout function to be absolutely sure the content is added to the DOM before updating. This bugs seems strange, but it will not appear if I avoid using the scrollbar so I think it is a problem of it but not yet known because of some fact that I don't know.
The only thing I can do for now is to describe the error in more detail:
I initialize the scrollbar at the beginning. Then at some point I remove some content so that the navigation doesn't need the scrollbar anymore. So I call $('selector').perfectScrollbar("update"). The call will be done after the DOM change was completed. But in fact the scrollbar will not change. Now I can scroll up a while and it will not refresh, only if I reach the top it will update the scrollbar and it will disappear. So the scrollbar even don't refresh while scrolling as you said above, only if I reached the top while scrolling!
julmot
on 1 Oct 2014
Hi!
I have similar problem. My code:
$(document).on("click", ".remove-parent", function () {
var parent = $(this).parent();
var psc = $(this).closest(".ps-container");
parent.remove();
if (psc.length) {
psc.scrollTop(0);
psc.perfectScrollbar('update');
}
});
<div class="ps-container" id="projectLiterals">
<div class="cntnt">
<div class="tool-box-row">
<a class="title" href="/Lit...">Global list</a>
<a href="#" class="remove-parent trash-icon"></a>
</div>
<div class="tool-box-row">
<a class="title" href="/Lit...">Global list</a>
<a href="#" class="remove-parent trash-icon"></a>
</div>
</div>
<div class="ps-scrollbar-x-rail"...>max-height of .ps-container = 4 tool-box-rows (200px = 4x50px). While we have more then 4 of them perfectScrollBar("update") works okay, but when we have less then 4 then I get either okay scroll (just invisible rail) or incorrect (rail with visible red scrolling bar)...
I tried to get into plugin:
if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) {
scrollbarYActive = true;
...
}
else {
scrollbarYActive = false;
...
}
I get here contentHeight bigger then containerHeight, but actually they are(should be) equal.
For example, I get contentHeight = 250px, containerHeight = 200px; 200px and 150px etc...
mantia11
on 4 Nov 2014
Could you make a fiddle to demonstrate?
julmot
on 4 Nov 2014
mantia11
on 5 Nov 2014
@mantia11 Yip, I see the problem.
Also this shows another problem I already knew: If you remove a item in the list, the scrollbar jumps to the top of the container, but that is not necessary.
@noraesae What do you think causes this problem?
julmot
on 5 Nov 2014
First of all, jumping to the top is caused by psc.scrollTop(0); line. Not a problem of the plugin itself. Anyway, I also see the problem. I'll look into it.
hatashiro
on 5 Nov 2014
I found that the script included in the fiddle is quite old. I've just released a new version with some regression bug fixes, so please try it again with the new version. I also added an example which do the exactly same thing with yours, and I saw it worked fine. Please refer to it as well.
Feel free to let me know about the result. Thanks.
hatashiro
on 5 Nov 2014
@mantia11 Please update your fiddle with the updated version.
@noraesae Could you please point out what the problem was? As I already said above I have the same problem but can not make a fiddle showing the problem. But maybe I can find the bug if I know what causes the problem in the fiddle from @mantia11 .
julmot
on 5 Nov 2014
I'm afraid I'm particularly not sure. I just guessed it was because of the problem that when updating the geometry, the remaining scrollbar affect geometry values. Following commits are all about the problem.
c1b40168f67557beeed44983ed307f77e2a65098
f099448e4451007f2581c4bdd36c14f279a30041
1849e64122cc9e77eb27c6e907b44b638c1bca4b
The problem was once resolved, but recently there was a regression bug of it, so I fixed the bug again. Then I added the removable-list-element example, tested it out and it worked fine.
hatashiro
on 5 Nov 2014
I found bug in my code! It was awful week really. I'm angry happy :))))
Thank you for your example, it motivated me to fight more and more :)))
So the bug was one my custom css line:
.ps-container .ps-scrollbar-y-rail{
display: block !important;
}
I don't remember why I added it... Just remember that I couldn't place the scrollrail to the right: 0; earlier...
mantia11
on 7 Nov 2014
I had a similar issue with 0.5.8. update wasn't working but I just tried destroy and then re-initializing and it is now working. I had a div with content which was then removed and replaced with new content by an ajax load. I was waiting until images were loaded before calling update.
varffs
on 3 Feb 2015
As this issue is long enouth open and the bug is not solved for me I switched to another scrollbar plugin. Now it's working as expected.
julmot
on 3 Feb 2015
What plugin?
FDiskas
on 24 Jul 2015
julmot
on 24 Jul 2015
I was struggling with this issue recently and I downloaded the latest version which is at this time 0.6.11 and it seems fixing the problem for me. Give it a try :)
scratchoo
on 27 May 2016
I am also having this issue. Stuck on this for hours.
azharuniverse
on 24 Aug 2016
cmer
·
chavishindler
·
MigFerreira
·
zadremal
·
Brugarolas
·
Most helpful comment
I already checked this. I also used the update inside a timout function to be absolutely sure the content is added to the DOM before updating. This bugs seems strange, but it will not appear if I avoid using the scrollbar so I think it is a problem of it but not yet known because of some fact that I don't know.
The only thing I can do for now is to describe the error in more detail:
I initialize the scrollbar at the beginning. Then at some point I remove some content so that the navigation doesn't need the scrollbar anymore. So I call
$('selector').perfectScrollbar("update"). The call will be done after the DOM change was completed. But in fact the scrollbar will not change. Now I can scroll up a while and it will not refresh, only if I reach the top it will update the scrollbar and it will disappear. So the scrollbar even don't refresh while scrolling as you said above, only if I reached the top while scrolling!