Scrolling issues in FireFox and IE11.

[Andrii-A]

Hi, I found an issue with the scrollbar in FireFox and IE11.

When you scroll the page with a mouse (by dragging handler up/down) you get highlighted all items on the page if a cursor doesn't stay inside the handler.

Expected Behavior

Would be great to have the same consistent behavior, as we have in Chrome, in FireFox and IE11 as well.

Steps to Reproduce

Open the example in FireFox or IE11:
http://idiotwu.github.io/smooth-scrollbar/

Click on handler and drag it up/down (don't release mouse).
if you move the cursor outside of the handler (without releasing mouse button), you will get highlighted items on the page.

Screenshot attached:

[idiotWu]

Thanks for reporting. This issue will be fixed in the next release 8.0.0 :)

[idiotWu]

I am busy with the other project these days, so I'm afraid v8 won't come so soon. Anyone who wants to fix this issue, please add the following codes into your css styles:

.scrollbar-track {
    user-select: none;
}

[Jerek0]

It seems the issue's still present on Safari 10.0 😕

[kimwes]

The suggested fix didn't work for me. Here's how I solved it. I'm using jQuery here but one can do it with native js easily. First I had to add some way of detecting that scrollbar is being dragged. I tried to hook to a dragstart event that I saw being invoked in the drag.js but apparently I called it wrong so I hooked on the general mousedown.
$(".scrollbar-track").on('mousedown', function(event) { container.addClass("dragging"); }); $(window).on('mouseup', function(event) { container.removeClass("dragging"); });
Then the css that was copied from the solution above with vendor prefixes.
.dragging { -o-user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; }
It would be nice if the library added the dragging or similar class itself and took care of the css.

[binhtq1]

Hi guys!

Currently, I used safari 13.1.1 (like the screenshot) and got an issue like the video. It still has the text cursor when dragging the scrollbar thumb. So, I just prevent the event selectstart to resolve them. Hope it works well on your end

addEvent(container, 'selectstart', (e) => { if (isMouseDown) { e.preventDefault(); } });

smooth-scrollbar-issue.mov