Resizing deletes content if the scroll bar is no longer needed

[DylanBulmer]

Situation:
I am building a "event log" that can take any number of logs; each log entry is in it's own div element.

Problem:
I found that when you resize the browser height to a scale that the content can fit in, all of the elements within the .slimscroll partent container is deleted and only one log is shown because the others were deleted.

Possible solution:
Is there a way to take the elements from the .scroll-wrapper (using .innerHTML?) and just place the items back to the previously described parent element, or even easier, just hide the scroll bar once the wrapper height is less than the parent element's height?

[DylanBulmer]

I looked into the code further, added a console.log() and realized that the removeSlimScroll() function is being called dozens of times. This should not be a problem except that this conditional: if(_this.isSlimScrollInserted){ ... } is passing every time inside removeSlimScroll(). (about line 204)

Somewhere in the code _this.isSlimScrollInserted is turning back true even though it is set false after the initial removal.

By digging more into this problem should find the cause of the boolean changing.

[DylanBulmer]

I have found a solution, I'm not sure if it is the solution but this is what I have:

...
204 removeSlimScroll = function(){
205    C.removeAttribute(l);  //reset
206    if (_this.isSlimScrollInserted && C.children[0].classList[0] == "scroll-wrapper") {
207        let insideContent = C.children[0].innerHTML;
208        C.innerHTML = insideContent;
209    }
210    _this.isSlimScrollInserted = false;
211    _this.initDone = false;
212 }
...

All I did was add in another conditional checking if the first child has a class value of scroll-wrapper and now everything works great! I only changed the following line and I removed the if statement to check if insideContent is not null (because I'm assuming that the scroll bar would NOT be visible only if there is content).

206    if (_this.isSlimScrollInserted && C.children[0].classList[0] == "scroll-wrapper") {

BTW
@kamlekar I am really enjoying this script you have made, I hope you continue development on this to improve this script and make it the best one out there! I will be using this script often and if I run into any bugs like this one, I will try to help out.

[kamlekar]

Thanks for the kind words, Dylan. I wish I could do more open source stuff but as I see, I am being quite busy with work these days. I will try my best to improve this code. Please send me PR, whenever you have time. Thanks. Sent from my BlackBerry From: [email protected]: 23 April 2018 9:59 PMTo: [email protected] to: [email protected]: [email protected]; [email protected]: Re: [kamlekar/slim-scroll] Resizing deletes content if the scroll bar is no longer needed (#33) I have found a solution, I'm not sure if it is the solution but this is what I have: ... 204 removeSlimScroll = function(){ 205 C.removeAttribute(l); //reset 206 if (_this.isSlimScrollInserted && C.children[0].classList[0] == "scroll-wrapper") { 207 let insideContent = C.children[0].innerHTML; 208 C.innerHTML = insideContent; 209 } 210 _this.isSlimScrollInserted = false; 211 _this.initDone = false; 212 } ... All I did was add in another conditional checking if the first child has a class value of scroll-wrapper and now everything works great! I only changed the following line and I removed the if statement to check if insideContent is not null (because I'm assuming that the scroll bar would NOT be visible only if there is content). 206 if (_this.isSlimScrollInserted && C.children[0].classList[0] == "scroll-wrapper") { BTW @kamlekar I am really enjoying this script you have made, I hope you continue development on this to improve this script and make it the best one out there! I will be using this script often and if I run into any bugs like this one, I will try to help out. —You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or mute the thread.