use non-native scrollbars

[nightwing]

rationale:

• scrollbars look bad with themes and theit style can't be changed on firefox
• non-native scrollbars are faster on both chrome and firefox
• it is needed to display markers behind the scroll bar that indicate where annotations or recent edit locations

i'd say we need to make very basic thin scrollbar, without arrorws, autohiding and restoring starting scroll position when mouse is dragged far enough

related to #867

[varemenos]

The webkit style that I use for the ace editors of codeMagic is this:

::-webkit-scrollbar {
    width: 0.5em;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.8);
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(100, 100, 100, 0.4);
}

It works for all the themes i've tested so far (and it should work for any theme because of the way I color the scrollbar parts).

[whitelynx]

I'd suggest taking a look at https://github.com/noraesae/perfect-scrollbar; it's a really slim library that implements simple overlay-style scrollbars.

[dolftax]

@whitelynx I am unable to get perfect-scrollbar and ace working. Have you tried it? If yes, how?

[thatkookooguy]

Haven't tried this yet, but my plan is to do something similar to what the ace.js scrollbars already do.

Basically, the scrollbars are seperate DOM elements than the actual code editor, and they are synced with the code editor.
I plan to display: none the default ones, and add my own custom little divs with my own scrollbars that will be synced with the editor (inner div with same height, outer div with scrollbar and a javascript function to sync it with the editor's scroll position). This can't be applied directly on ace's scrollbars (I think) because once you change the DOM structure (custom scrollbars usually do), they don't work anymore.

I'm pretty sure this will work, but haven't tried it yet.

[whitelynx]

@whitelynx I am unable to get perfect-scrollbar and ace working. Have you tried it? If yes, how?

Yes; you can see my implementation at https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editors (it's not a very clean implementation, but it works reasonably well)

[tomermes]

@whitelynx The link is broken, is there any up to date reference?

[dolftax]

@whitelynx I don't know how I missed it but could you please update the link?

[whitelynx]

Sorry, not sure how that got messed up... It should be: https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editor.js

[drake7707]

Does the horizontal scrolling work? Vertical scrolling works fine but every time I try to scroll horizontally it jumps back.

Some time later

Alright I managed to fix it by changing the following in scrollbar.js:

    /**
     * Emitted when the scroll bar, well, scrolls.
     * @event scroll
     * @param {Object} e Contains one property, `"data"`, which indicates the current scroll left position
     **/
    this.onScroll = function() {
        if (!this.skipEvent) {
            // DO NOT FIRE THIS EVENT, THIS WILL NOT WORK WITH perfect-scrollbar
            //this.scrollLeft = this.element.scrollLeft;
            //this._emit("scroll", {data: this.scrollLeft});
        }
        this.skipEvent = false;
    };

The onScroll caused the scrollLeft to be reset to 0 each time. I noticed when I put a breakpoint in the setScrollLeft function it breaked twice, once with the correct value and once with 0. The latter was caused by the onScroll.

[rocketinventor]

@whitelynx Is there a live demo that we can try?

[drake7707]

@rocketinventor I've applied the same implementation that @whitelynx gave, with the onScroll fix I posted above over on http://drake7707.github.io/Typescript-Editor/ .

This is the snippet I used which works fine for vertical scrolling, but doesn't seem to work completely on horizontal scrolling, but at least with the onScroll commented out I can still navigate with the keyboard so it's not such a big deal.

        var scrollbars = $('.ace_scrollbar')
         .css('overflow', 'hidden');


        var scrollbarSettings = { suppressScrollX: true, includePadding: true, minScrollbarLength: 12 };
        scrollbars.filter('.ace_scrollbar-v').perfectScrollbar(scrollbarSettings);
        scrollbars.filter('.ace_scrollbar-h').perfectScrollbar(scrollbarSettings);

        var editors = [editor, editorCSS, editorHTML, editorJavascript];
        for (var i = 0; i < editors.length; i++) {
            var e = editors[i];
            e.$blockScrolling = Infinity;
            var container = e.renderer.getContainerElement();
            $(e).hover(
                function () { scrollbars.addClass('hover'); },
                function () { scrollbars.removeClass('hover'); }
            );
            var session = e.getSession();
            session.on('change', function () {
                scrollbars.perfectScrollbar('update');
            });
        }
        $(window).resize(function () {
            scrollbars.perfectScrollbar('update');
        });

[rocketinventor]

@drake7707 That demo works well for me for horizontal and vertical scrolling. However, there is no horizontal scrollbar showing. Why is that?

[drake7707]

@rocketinventor I'm not sure, it's probably the suppressScrollX: true option. If I check the examples on http://www.reseauacces.com/application/views/layouts/plugins/scrollbar/examples/options-suppressScrollAxis.html it will hide the vertical scrollbar when that option is set.

[drake7707]

Yeah disregard my earlier comment. I didn't realize it was the suppressScrollX: true that caused the onScroll to fire twice and reset back to 0. Setting that to false and restoring the onScroll function makes both scroll directions as they should, with visible scroll on both.

[kraftbuilder]

@drake7707 this is buggly onScroll :(

[ukandrewc]

Just created CSS styled scrollbars here: https://github.com/ukandrewc/Ace-Scrollbars

[elderlabs]

Sorry to bump an ancient issue here, but any ideas of this natively working with OverlayScrollbars, or perhaps a mechanism to override a built-in one?

[github-actions]

This issue has not received any attention in 1 year. If you want to keep this issue open, please leave a comment below and auto-close will be canceled.

[andrewnester]

related to this PR #4905