Ace: गैर-देशी स्क्रॉलबार का उपयोग करें

कोडमैजिक के हूं वह यह है:

::-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 पर एक नज़र डालें

@whitelynx मैं सही-स्क्रॉलबार और इक्का काम करने में असमर्थ हूं। या तुमने कोशिश की? यदि हाँ, तो कैसे?

अभी तक यह कोशिश नहीं की है, लेकिन मेरी योजना कुछ ऐसा ही करने की है जो ace.js स्क्रॉलबार पहले से ही करते हैं।

मूल रूप से, स्क्रॉलबार वास्तविक कोड संपादक की तुलना में अलग DOM तत्व होते हैं, और वे कोड संपादक के साथ समन्वयित होते हैं।
मैं डिफ़ॉल्ट वाले display: none की योजना बना रहा हूं, और अपने स्वयं के कस्टम छोटे divs को अपने स्वयं के स्क्रॉलबार के साथ जोड़ूंगा जो संपादक के साथ समन्वयित किया जाएगा (समान ऊंचाई के साथ आंतरिक div, स्क्रॉलबार के साथ बाहरी div और जावास्क्रिप्ट इसे संपादक की स्क्रॉल स्थिति के साथ सिंक करने के लिए कार्य करें)। इसे सीधे ऐस के स्क्रॉलबार (मुझे लगता है) पर लागू नहीं किया जा सकता है क्योंकि एक बार जब आप डीओएम संरचना बदलते हैं (कस्टम स्क्रॉलबार आमतौर पर करते हैं), तो वे अब और काम नहीं करते हैं।

मुझे पूरा यकीन है कि यह काम करेगा, लेकिन अभी तक कोशिश नहीं की है।

@whitelynx मैं सही-स्क्रॉलबार और इक्का काम करने में असमर्थ हूं। या तुमने कोशिश की? यदि हाँ, तो कैसे?

हां; आप मेरे कार्यान्वयन को https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editors पर देख सकते हैं (यह बहुत साफ कार्यान्वयन नहीं है, लेकिन यह काफी अच्छी तरह से काम करता है)

@whitelynx लिंक टूटा हुआ है, क्या कोई अद्यतित संदर्भ है?

@whitelynx मुझे नहीं पता कि मैंने इसे कैसे याद किया लेकिन क्या आप कृपया लिंक अपडेट कर सकते हैं?

क्षमा करें, सुनिश्चित नहीं है कि यह कैसे गड़बड़ हो गया... यह होना चाहिए: https://github.com/whitelynx/web-pgq/blob/master/static/js/directives/editor.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;
    };

ऑनस्क्रॉल ने स्क्रॉललेफ्ट को हर बार 0 पर रीसेट करने का कारण बना दिया। मैंने देखा जब मैंने सेटस्क्रॉल लेफ्ट फ़ंक्शन में ब्रेकपॉइंट लगाया तो यह दो बार टूट गया, एक बार सही मान के साथ और एक बार 0 के साथ। बाद वाला ऑनस्क्रॉल के कारण हुआ।

@whitelynx क्या कोई _live_ डेमो है जिसे हम आजमा सकते हैं?

@rocketinventor मैंने वही कार्यान्वयन लागू किया है जो @whitelynx ने दिया था, ऑनस्क्रॉल फिक्स के साथ मैंने http://drake7707.github.io/Typescript-Editor/ पर ऊपर पोस्ट किया था।

यह वह स्निपेट है जिसका मैंने उपयोग किया था जो लंबवत स्क्रॉलिंग के लिए ठीक काम करता है, लेकिन क्षैतिज स्क्रॉलिंग पर पूरी तरह से काम नहीं कर रहा है, लेकिन कम से कम ऑनस्क्रॉल ने टिप्पणी की है कि मैं अभी भी कीबोर्ड से नेविगेट कर सकता हूं, इसलिए यह इतना बड़ा सौदा नहीं है।

        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 जिसके कारण ऑनस्क्रॉल दो बार आग लग गया और 0 पर रीसेट हो गया। इसे गलत पर सेट करना और ऑनस्क्रॉल फ़ंक्शन को पुनर्स्थापित करना दोनों स्क्रॉल दिशाओं को दोनों पर दृश्यमान स्क्रॉल के साथ बनाता है।

@ ड्रेक7707 यह

बस यहाँ CSS स्टाइल के स्क्रॉलबार बनाए: https://github.com/ukandrewc/Ace-Scrollbars

यहां एक प्राचीन मुद्दे को टक्कर देने के लिए खेद है, लेकिन इसके मूल रूप से ओवरलेस्क्रॉलबार के साथ काम करने का कोई विचार, या शायद एक अंतर्निहित एक को ओवरराइड करने के लिए एक तंत्र?