Scrollbar not initialized on touchpad devices

[crzo]

Hello,

the scrollbar does not work on chrome on a macbook (with a touchpad). after plug in an external usb mouse device and reloading my application it works as expected.

Do i have to do something different or is it a real bug?

[gromo]

Hi @crzo

Just tested it on mac book with touchpad on chrome using http://gromo.github.io/jquery.scrollbar/demo/basic.html - everything works fine. Looks like glitch on your mac.

Btw "does not work" tells me nothing - can page be scrolled or not? Or page can be scrolled, but you see native browser scrollbar? Or something else?

[crzo]

Hi @gromo

mhhh. maybe there is something wrong with the implementation. I use your implementation in a meteorjs app and installed your lib using athmospherejs.

I'll check if i have the current stable version.

On http://gromo.github.io/jquery.scrollbar/demo/basic.html everything works as expected. So it has to be some issue on my side.

Here is a snippet how i use the lib:

<div class="chats scrollbar-macosx">
                        {{#each chat in getChats}}
                            <div class="chat jsSelectChat"
                                 data-chat-id="{{chat._id}}">
                                <div class="name">
                                    {{chat.chatName}}
                                </div>
                                <div class="last-message-container">
                                    <div class="last-message">
                                        {{chat.lastMessage}}
                                    </div>
                                </div>
                                {{#if hasUnreadMessages chat._id}}
                                    <div class="unread-counter">
                                        {{getUnreadCounter chat._id}}
                                    </div>
                                {{/if}}
                                <div class="time">
                                    {{time chat.lastSendDate}}
                                </div>
                            </div>
                        {{/each}}
                    </div>

the corresponding scss:

.chats {
    width: 30%;

    .chat {
      border-bottom: 1px solid black;
      padding: 5px;
      background: white;
      color: black;
      position: relative;
    }
}

and the js part where the scrollbar is initialized after rendering is complete:

Template.messages.rendered = function () {
    let template = this;

    Tracker.autorun(() => {
        template.chats.get();
        Tracker.afterFlush(() => {
            $('.scrollbar-macosx').scrollbar();
        });
    });
}

please note that i am initialize the scrollbar everytime a chat comes in because the overall height is changing.

This works fine for almost every device except the mac (tested with 3 different macs only using touchpad). The scrollbar does not appear. As soon as i plug in a mouse device the scrollbar appears after page reload.

However, the test site seems to work perfectly. Do you have the latest athmospherejs package deployed? I am using: gromo:jquery.scrollbar@0.0.1

Thanks in advance, Chris

[gromo]

Re-initializing plugin is not a problem, it's designed to work so. Try to use version from github directly, without package managers to test if it works. I didn't use it with meteorjs or other frameworks/libraries, so I don't know what can be the reason.

[crzo]

Hello @gromo

thanks for your answer. I was right. I used a really old version of your library (loaded and installed from athmospherejs). So it was very irritating first, but now (with the current version 0.2.11) everything works fine :-)

Thanks!