Ace: Verwenden Sie nicht-native Bildlaufleisten

Der Webkit-Stil, den ich für die Ass-Editoren von codeMagic verwende, ist dieser:

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

Es funktioniert für alle Themen, die ich bisher getestet habe (und es sollte für jedes Thema funktionieren, da ich die Bildlaufleistenteile einfärbe).

Ich würde vorschlagen, einen Blick auf https://github.com/noraesae/perfect-scrollbar zu werfen

@whitelynx Ich kann die Perfect-Scrollbar und das Ass nicht zum

Ich habe dies noch nicht ausprobiert, aber mein Plan ist, etwas Ähnliches zu tun, wie die ace.js Bildlaufleisten bereits tun.

Grundsätzlich sind die Bildlaufleisten separate DOM-Elemente als der eigentliche Code-Editor und sie werden mit dem Code-Editor synchronisiert.
Ich plane display: none die Standardeinstellungen und füge meine eigenen benutzerdefinierten kleinen divs mit meinen eigenen Bildlaufleisten hinzu, die mit dem Editor synchronisiert werden (inneres Div mit gleicher Höhe, äußeres Div mit Bildlaufleiste und einem Javascript Funktion zum Synchronisieren mit der Scroll-Position des Editors). Dies kann nicht direkt auf die Bildlaufleisten von ace angewendet werden (glaube ich), denn sobald Sie die DOM-Struktur ändern (benutzerdefinierte Bildlaufleisten tun dies normalerweise), funktionieren sie nicht mehr.

Ich bin mir ziemlich sicher, dass das funktioniert, habe es aber noch nicht ausprobiert.

@whitelynx Ich kann die Perfect-Scrollbar und das Ass nicht zum

Jawohl; Sie können meine Implementierung unter https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editors sehen (es ist keine sehr saubere Implementierung, funktioniert aber einigermaßen gut)

@whitelynx Der Link ist defekt, gibt es eine aktuelle Referenz?

@whitelynx Ich weiß nicht, wie ich es verpasst habe, aber könnten Sie bitte den Link aktualisieren?

Entschuldigung, ich bin mir nicht sicher, wie das durcheinander gekommen ist ... Es sollte sein: https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editor.js

Funktioniert das horizontale Scrollen? Vertikales Scrollen funktioniert gut, aber jedes Mal, wenn ich versuche, horizontal zu scrollen, springt es zurück.

Etwas später

Okay, ich habe es geschafft, es zu beheben, indem ich Folgendes in scrollbar.js geändert habe:

    /**
     * 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;
    };

Durch onScroll wurde scrollLeft jedes Mal auf 0 zurückgesetzt. Mir ist aufgefallen, dass als ich einen Breakpoint in die setScrollLeft-Funktion gesetzt habe, dieser zweimal unterbrochen wurde, einmal mit dem richtigen Wert und einmal mit 0. Letzteres wurde durch den onScroll verursacht.

@whitelynx Gibt es eine _live_-Demo, die wir ausprobieren können?

@rocketinventor Ich habe die gleiche Implementierung wie @whitelynx angewendet, mit dem onScroll-Fix, den ich oben auf http://drake7707.github.io/Typescript-Editor/ gepostet habe.

Dies ist das Snippet, das ich verwendet habe, das für vertikales Scrollen gut funktioniert, aber für horizontales Scrollen nicht vollständig zu funktionieren scheint, aber zumindest mit dem auskommentierten onScroll kann ich immer noch mit der Tastatur navigieren, also ist es nicht so schlimm.

        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 Diese Demo funktioniert für mich gut für horizontales und vertikales Scrollen. Es wird jedoch keine horizontale Bildlaufleiste angezeigt. Warum ist das so?

@rocketinventor Ich bin mir nicht sicher, es ist wahrscheinlich die Option suppressScrollX: true . Wenn ich die Beispiele auf http://www.reseauacces.com/application/views/layouts/plugins/scrollbar/examples/options-suppressScrollAxis.html überprüfe, wird die vertikale Bildlaufleiste ausgeblendet, wenn diese Option gesetzt ist.

Ja ignoriere meinen vorherigen Kommentar. Ich wusste nicht, dass es suppressScrollX: true , das dazu führte, dass onScroll zweimal ausgelöst und auf 0 zurückgesetzt wurde. Wenn Sie dies auf false setzen und die onScroll-Funktion wiederherstellen, werden beide Scrollrichtungen wie gewünscht, mit sichtbarem Scrollen auf beiden.

@drake7707 das ist fehlerhaft aufScroll :(

Ich habe hier gerade Scrollbars im CSS-Stil erstellt: https://github.com/ukandrewc/Ace-Scrollbars

Entschuldigung, dass ich hier auf ein altes Problem stoße, aber irgendwelche Ideen dafür, dass dies nativ mit OverlayScrollbars funktioniert, oder vielleicht einen Mechanismus zum Überschreiben eines integrierten?