Ace: use barras de rolagem não nativas

O estilo do webkit que eu uso para os editores ace do codeMagic é este:

::-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);
}

Funciona para todos os temas que testei até agora (e deve funcionar para qualquer tema por causa da forma como pinto as partes da barra de rolagem).

Eu sugiro dar uma olhada em https://github.com/noraesae/perfect-scrollbar; é uma biblioteca muito pequena que implementa barras de rolagem simples no estilo de sobreposição.

@whitelynx Não consigo fazer com que a barra de rolagem perfeita e o ace funcionem. Tentaste? Se sim, como?

Ainda não tentei isso, mas meu plano é fazer algo semelhante ao que as barras de rolagem ace.js já fazem.

Basicamente, as barras de rolagem são elementos DOM separados do editor de código real e são sincronizadas com o editor de código.
Pretendo display: none os padrões e adicionar meu próprio pequeno divs com minhas próprias barras de rolagem que serão sincronizadas com o editor (div interno com a mesma altura, div externo com barra de rolagem e um javascript para sincronizá-lo com a posição de rolagem do editor). Isso não pode ser aplicado diretamente nas barras de rolagem do Ace (eu acho) porque uma vez que você altera a estrutura do DOM (barras de rolagem personalizadas geralmente mudam), elas não funcionam mais.

Tenho certeza de que funcionará, mas ainda não tentei.

@whitelynx Não consigo fazer com que a barra de rolagem perfeita e o ace funcionem. Tentaste? Se sim, como?

Sim; você pode ver minha implementação em https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editors (não é uma implementação muito limpa, mas funciona razoavelmente bem)

@whitelynx O link está quebrado, existe alguma referência atualizada?

@whitelynx Não sei como perdi, mas você poderia atualizar o link?

Desculpe, não tenho certeza de como isso ficou confuso ... Deveria ser: https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editor.js

A rolagem horizontal funciona? A rolagem vertical funciona bem, mas toda vez que tento rolar horizontalmente, ela salta para trás.

Algum tempo depois

Tudo bem, consegui consertar alterando o seguinte em scrollbar.js:

    /**
     * Emitted when the scroll bar, well, scrolls.
     * <strong i="9">@event</strong> scroll
     * <strong i="10">@param</strong> {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;
    };

O onScroll fazia com que scrollLeft fosse redefinido para 0 a cada vez. Percebi que quando coloquei um breakpoint na função setScrollLeft ele quebrou duas vezes, uma com o valor correto e outra com 0. Este último foi causado pelo onScroll.

@whitelynx Existe uma demonstração do _live_ que podemos experimentar?

@rocketinventor Apliquei a mesma implementação fornecida por http://drake7707.github.io/Typescript-Editor/ .

Este é o trecho que usei que funciona bem para rolagem vertical, mas não parece funcionar completamente na rolagem horizontal, mas pelo menos com o onScroll comentado, ainda posso navegar com o teclado, então não é um grande negócio.

        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');
        });

@ drake7707 Essa demonstração funciona bem para mim para rolagem horizontal e vertical. No entanto, não há exibição de barra de rolagem horizontal. Por que é que?

@rocketinventor Não tenho certeza, é provavelmente a opção suppressScrollX: true . Se eu verificar os exemplos em http://www.reseauacces.com/application/views/layouts/plugins/scrollbar/examples/options-suppressScrollAxis.html, ele ocultará a barra de rolagem vertical quando essa opção for definida.

Sim, desconsidere meu comentário anterior. Eu não percebi que era suppressScrollX: true que fazia o onScroll disparar duas vezes e redefinir para 0. Definir isso como falso e restaurar a função onScroll torna as duas direções de rolagem como deveriam, com rolagem visível em ambas.

@ drake7707 este é um bug onScroll :(

Acabei de criar barras de rolagem em estilo CSS aqui: https://github.com/ukandrewc/Ace-Scrollbars

Desculpe abordar um problema antigo aqui, mas alguma ideia de trabalhar nativamente com OverlayScrollbars, ou talvez um mecanismo para substituir um integrado?