Skip to content

method "_ease" will cause huge negative scroll values when browser window is updated in background #321

Closed
@fatelgit

Description

I am using your mcustomscrollbar for a chat application. The chat is based on nodejs. While development I stumbled accross the following issue:
When a user switches his tab to background (e.g. he decided to open another tab or minimizes the browser) and he receives new messages from the server mcustomscrollbar scrolls to a huge negative number when he comes back. (the value for "top" on the mCSB_container is set to something like "-363139542652px").

I am adding the new messages when the repective event occurs by doing this:
$(".chat .mCSB_container").append('<span>myText</span>');

Additionally the content will be scrolled to bottom:
$(".chat .mCSB_container").mCustomScrollbar("scrollTo", 'bottom');

This works fine until not in background, so I started tracing down this issue and was able to find the part where those huge numbers for scrolling are created. By default the scrollbar uses "mcsEaseInOut" for method "_ease" - the return value will be that high because the value for parameter "t" will be very high and multiplied by iteself several times.
When in foreground the value for "t" will be 16,66...ms which is the delay between the animation steps (60 fps) but when switching back to the inactive tab there will be much higher values (based on the idle time), which is normal behaviour for window.requestAnimationFrame since it pauses rendering when inactive, I think.
Of course I could bypass this by adding a scrollEasing - type for my purpose but I wanted to share this issue and mabye someone will come up with a nicer solution I couldn't think of yet.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions