Ace: utilizar barras de desplazamiento no nativas

El estilo de webkit que utilizo para los editores as de codeMagic es 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 los temas que he probado hasta ahora (y debería funcionar para cualquier tema debido a la forma en que coloreo las partes de la barra de desplazamiento).

Sugeriría echar un vistazo a https://github.com/noraesae/perfect-scrollbar; es una biblioteca realmente delgada que implementa barras de desplazamiento simples de estilo superpuesto.

@whitelynx No puedo hacer funcionar la barra de desplazamiento perfecta y el as. ¿Lo has probado? Si es así, ¿cómo?

No he probado esto todavía, pero mi plan es hacer algo similar a lo que ya hacen las barras ace.js desplazamiento

Básicamente, las barras de desplazamiento son elementos DOM separados del editor de código real y están sincronizados con el editor de código.
Planeo display: none los predeterminados, y agregar mi propio pequeño divs con mis propias barras de desplazamiento que se sincronizarán con el editor (div interno con la misma altura, div externo con barra de desplazamiento y javascript función para sincronizarlo con la posición de desplazamiento del editor). Esto no se puede aplicar directamente en las barras de desplazamiento de ace (creo) porque una vez que cambia la estructura DOM (las barras de desplazamiento personalizadas suelen hacerlo), ya no funcionan.

Estoy bastante seguro de que esto funcionará, pero aún no lo he probado.

@whitelynx No puedo hacer funcionar la barra de desplazamiento perfecta y el as. ¿Lo has probado? Si es así, ¿cómo?

Sí; puede ver mi implementación en https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editors (no es una implementación muy limpia, pero funciona razonablemente bien)

@whitelynx El enlace está roto, ¿hay alguna referencia actualizada?

@whitelynx No sé cómo me lo perdí, pero ¿podrían actualizar el enlace?

Lo siento, no estoy seguro de cómo se estropeó eso ... Debería ser: https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editor.js

¿Funciona el desplazamiento horizontal? El desplazamiento vertical funciona bien, pero cada vez que intento desplazarme horizontalmente, salta hacia atrás.

Algún tiempo después

Muy bien, logré solucionarlo cambiando lo siguiente en 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;
    };

El onScroll hizo que scrollLeft se restableciera a 0 cada vez. Noté que cuando puse un punto de interrupción en la función setScrollLeft, se rompió dos veces, una con el valor correcto y otra con 0. Este último fue causado por onScroll.

@whitelynx ¿Hay alguna demostración de _live_ que podamos probar?

@rocketinventor He aplicado la misma implementación que dio @whitelynx , con la corrección onScroll que publiqué anteriormente en http://drake7707.github.io/Typescript-Editor/ .

Este es el fragmento que utilicé que funciona bien para el desplazamiento vertical, pero no parece funcionar completamente en el desplazamiento horizontal, pero al menos con el onScroll comentado, todavía puedo navegar con el teclado, por lo que no es tan importante.

        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 Esa demostración me funciona bien para el desplazamiento horizontal y vertical. Sin embargo, no se muestra una barra de desplazamiento horizontal. ¿Porqué es eso?

@rocketinventor No estoy seguro, probablemente sea la opción suppressScrollX: true . Si reviso los ejemplos en http://www.reseauacces.com/application/views/layouts/plugins/scrollbar/examples/options-suppressScrollAxis.html , ocultará la barra de desplazamiento vertical cuando se establezca esa opción.

Sí, ignore mi comentario anterior. No me di cuenta de que era el suppressScrollX: true que provocó que onScroll se disparara dos veces y se restableciera a 0. Establecerlo en falso y restaurar la función onScroll hace que ambas direcciones de desplazamiento sean como deberían, con desplazamiento visible en ambas.

@ drake7707 esto tiene errores en el desplazamiento :(

Acabo de crear barras de desplazamiento con estilo CSS aquí: https://github.com/ukandrewc/Ace-Scrollbars

Perdón por encontrar un problema antiguo aquí, pero ¿alguna idea de que esto funcione de forma nativa con OverlayScrollbars, o tal vez un mecanismo para anular uno integrado?