incorrect sizing

[maikelmclauflin]

hi there, just wondering if anyone else has run into any problems with scrollbars being incorrectly sized. I can't figure out if it's just me or if it's the plugin. I am using the plugin inside of an app that i'm building using backbone marionette. I only init the plugin after inside of onAttach functions, or after the element has been put into the dom, but with the dynamic content i'm loading in asyncly the scrollbars I'm getting are not quite reflective of the amount of content there is. Well, I should say that I'm not sure if it's because of the padding i have on the wrapper inside of the div i'm calling the plugin on, or if it's the content that's being brought in. Has anyone else gotten this problem?

[gromo]

I can help if you provide simple example with incorrect behavior. This problem does not look simple - maybe problem is with initialization or destroying previously initialized scrollbar, maybe problem with re-creating scrollable DOM element when all events are lost. There can be several reasons and I need simple example to say what exactly is wrong

[maikelmclauflin]

so this is what i use to init each element. Basically, i pass an element into a global module that takes care of making sure that i have not already inited it, and that it gets set up with the right closure / events so that it triggers some global events on my app object.
I've been having better luck with the onUpdate and setting the container to a height of auto because that's what always happens on resize, but it doesn't always seem to work. would you like the css as well? (also, mark scrolling is just a function i use to put a class on the scrollbars when they're scrolling so i can fade them in and out on my terms)

var scrollbars = $();
var setupScrollbar = module.setupScrollbar = function (els) {
    return $(els).each(function (idx, el) {
        var lastObj, previous = [0, 0];
        var scrollFinishedDebouncer = _.debounce(function () {
            unmarkScrolling(lastObj.scrollx.scroll);
            unmarkScrolling(lastObj.scrolly.scroll);
        }, 500);
        if (scrollbars.index(el) === -1) {
            scrollbars.push(el);
            $(el).height();
            $(el).scrollbar({
                onUpdate: function () {
                    this.container.css({
                        height: 'auto'
                    });
                },
                onScroll: function (y, x) {
                    if (lastObj) {
                        lastObj = this;
                        if (y.scroll !== previous[1]) {
                            markScrolling(this.scrolly.scroll);
                        }
                        previous[1] = y.scroll;
                        if (x.scroll !== previous[0]) {
                            markScrolling(this.scrollx.scroll);
                        }
                        previous[0] = x.scroll;
                        app.trigger('global:body:scroll');
                        scrollDebouncer();
                        scrollFinishedDebouncer();
                    } else {
                        lastObj = this;
                    }
                }
            });
        }
    });
};

[gromo]

Hi.

I'm sure your code can be rewritten better way. Try next thing: before updating scrollable element/its content, just destroy custom scrollbar and init it again after update - it will make your code clear and short.

Also, all initialized custom scrollbars are registered in plugin: it checks every 300 ms the size of container and its content for each custom scrollbar. And if scrollbar size is incorrect, it means something is wrong in calculating or custom scrollbar size calculation function is not run at all.

[maikelmclauflin]

if you read the code, you will clearly see that i never init the scrollbar on the same element 2x

[gromo]

I've read your code, but it does not explain what's wrong happens in your environment

[maikelmclauflin]

why should that matter? isn't the plugin constantly checking the height and width of the element that it is called on?

[maikelmclauflin]

should it always be up to date if it's checking the dom every n milliseconds?

[gromo]

All the information you provided here is useless. You should check scrollbar behaviour - look at DOM structure after you initialize plugin, then update content as you do it, and re-check DOM structure again. Try to understand if scrollable container was overwritten or not, try to init custom scrollbar on updated container again and see what happen next.

[maikelmclauflin]

the dom structure is always the same, it clones the dom node that i call the plugin on then inserts it into itself. it never does this more than once. I have checked. If you go back to my original question i state that resizing the browser window corrects it, so there is probably a bug in the check that is happening every n milliseconds, that is getting ironed out in the resize event.

[maikelmclauflin]

is the plugin only checking the last inited dom node? or is it checking all of them on the interval that the plugin has been called on?

[maikelmclauflin]

whoops. i guess i didn't mention that. my bad. well, it corrects itself on resize. usually the height is set to auto

[gromo]

it clones the dom node that i call the plugin on then inserts it into itself

How does it happen? This moment is not clear for me.

is it checking all of them on the interval that you have setup?

Yes

[maikelmclauflin]

the plugin literally clones the dom node and puts it inside of itself. you will notice that the second picture has a modified dom structure with the ".main-container-content" node (the node that the plugin was called on) recreated inside of itself, causing a deeper structure. This is the moment that the plugin is inited on the dom node. this is literally the only thing that happens, and it happens whether or not i use the module's function that i defined above.

[gromo]

So you were talking about plugin - it does not clone, it wraps element with custom container that is different. But I am more interested in HOW YOU UPDATE your content and what happens next. Didn't you try to init custom scrollbar on your container after content was updated? For example, manually from the browser console, and then look at DOM structure - is it the same, or it was changed.

[gromo]

Unfortunately I'm going to bed now. Let's continue tomorrow or on monday.

[maikelmclauflin]

whether or not i am simply appending elements or replacing the innerHTML of a dom node, it should not make a difference, as the plugin should be detecting the amount of content inside of the dom node that was first inited on. Should i be reinitializing the plugin if i add / remove any of the content? let me know

[gromo]

Should i be reinitializing the plugin

No, it should detect content/container size changes automatically. But in your case we have problem. Is there any way for me to look at your environment?