Ace: использовать неродные полосы прокрутки

Стиль webkit, который я использую для редакторов ace codeMagic, таков :

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

Он работает для всех тем, которые я тестировал до сих пор (и он должен работать для любой темы из-за того, как я раскрашиваю части полосы прокрутки).

Я бы посоветовал взглянуть на https://github.com/noraesae/perfect-scrollbar; это действительно тонкая библиотека, которая реализует простые полосы прокрутки в стиле наложения.

@whithernx Я не могу заставить работать perfect-scrollbar и ace. Ты пробовал это? Если да, то как?

Еще не пробовал, но я планирую сделать что-то похожее на то, что уже делают полосы прокрутки ace.js .

По сути, полосы прокрутки - это отдельные элементы DOM, а не сам редактор кода, и они синхронизируются с редактором кода.
Я планирую использовать display: none по умолчанию и добавить свой собственный маленький divs с моими собственными полосами прокрутки, которые будут синхронизироваться с редактором (внутренний div с той же высотой, внешний div с полосой прокрутки и javascript функция, чтобы синхронизировать его с положением прокрутки редактора). Это не может быть применено непосредственно к полосам прокрутки ace (я думаю), потому что после того, как вы измените структуру DOM (обычно это делают пользовательские полосы прокрутки), они больше не работают.

Я почти уверен, что это сработает, но еще не пробовал.

@whithernx Я не могу заставить работать perfect-scrollbar и ace. Ты пробовал это? Если да, то как?

Да; вы можете увидеть мою реализацию на https://github.com/whithernx/web-pgq/blob/master/static/js/directives/editors (это не очень чистая реализация, но работает достаточно хорошо)

@whithernx Ссылка не работает, есть ли актуальная ссылка?

@whithernx Не знаю, как я это пропустил, но не могли бы вы обновить ссылку?

Извините, не знаю, как это было запутано ... Должно быть: https://github.com/whithernx/web-pgq/blob/master/static/js/directives/editor.js

Горизонтальная прокрутка работает? Вертикальная прокрутка работает нормально, но каждый раз, когда я пытаюсь прокрутить по горизонтали, она возвращается назад.

Некоторое время спустя

Хорошо, мне удалось это исправить, изменив следующее в 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;
    };

OnScroll каждый раз сбрасывал scrollLeft на 0. Я заметил, что когда я установил точку останова в функции setScrollLeft, она дважды сломалась, один раз с правильным значением и один раз с 0. Последнее было вызвано onScroll.

@whithernx Есть ли _live_ демо, которое мы можем попробовать?

@rocketinventor Я применил ту же реализацию, что и @whithernx , с исправлением onScroll, которое я опубликовал выше на http://drake7707.github.io/Typescript-Editor/ .

Это тот фрагмент, который я использовал, который отлично работает для вертикальной прокрутки, но, похоже, не работает полностью при горизонтальной прокрутке, но, по крайней мере, с закомментированным onScroll я все еще могу перемещаться с помощью клавиатуры, так что это не такая большая проблема.

        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 Эта демонстрация мне

@rocketinventor Я не уверен, вероятно, это вариант suppressScrollX: true . Если я проверю примеры на http://www.reseauacces.com/application/views/layouts/plugins/scrollbar/examples/options-suppressScrollAxis.html, он скроет вертикальную полосу прокрутки, когда этот параметр установлен.

Да, не обращайте внимания на мой предыдущий комментарий. Я не понимал, что это был suppressScrollX: true , из-за которого onScroll сработал дважды и сбросил его до 0. Установка этого значения в false и восстановление функции onScroll делает оба направления прокрутки такими, как они должны, с видимой прокруткой на обоих.

@ drake7707 это глючит на Scroll :(

Здесь только что созданы полосы прокрутки в стиле CSS: https://github.com/ukandrewc/Ace-Scrollbars

Извините, что столкнулся с древней проблемой здесь, но есть ли идеи о том, что это изначально работает с OverlayScrollbars, или, возможно, механизм переопределения встроенного?