Untitled

dabblet.css

body {
	font-family: Trebuchet MS, Helvetica, Arial, sans;
}

div {
	margin: 20px;
	border: 1px solid black;
	padding: 10px;
	width: 400px;
	height: 160px;
	overflow-y: scroll;
	overflow-x: hidden;
}

pre,
style {
	display: block;
	margin: 0;
	font-family: Monaco, monospace, serif;
	font-size: 80%;
	white-space: pre;
}

h4 {
	margin: 0;
	color: red;
}

.win h4 {
	color: green;
}

dabblet.html

<h1>Some webkit's scrollbars experiments</h1>



<h3>Thumb and track can't be styled alone, scrollbar should also be, whatever the style is !</h3>

<div id="test-1">
	<h4>Fail</h4>
	<style type="text/css" scoped>
:root {
	color: red;
}
:root::-webkit-scrollbar-thumb {
	background: green;
}
:root::-webkit-scrollbar-track {
	background: blue;
}
	</style>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="test-2" class="win">
	<h4>Win</h4>
	<style type="text/css" scoped>
:root::-webkit-scrollbar {
	font-weight: normal;
}
:root::-webkit-scrollbar-thumb {
	background: green;
}
:root::-webkit-scrollbar-track {
	background: blue;
}
	</style>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>



<h3>Scrollbar loses default style whatever the style is</h3>

<div id="test-3">
	<h4>Fail</h4>
	<style type="text/css" scoped>
:root::-webkit-scrollbar {
	font-weight: normal;
}
	</style>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


<div id="test-4" class="win">
	<h4>Win</h4>
	<style type="text/css" scoped>
:root::-webkit-scrollbar {

}
	</style>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<h3>Thumb borders can be outside of the scrollbar but are very, <u>very</u> buggy, like inversed or something...</h3>
<div id="test-5">
	<h4>Fail</h4>
	<style type="text/css" scoped>
:root::-webkit-scrollbar {
	width: 20px;
	background: #DDD;
}

:root::-webkit-scrollbar-thumb {
	border-top: 120px solid green;
	border-right: 120px solid blue;
	border-bottom: 120px solid purple;
	border-left: 120px solid red;
}
	</style>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="test-6" class="win">
	<h4>Win</h4>
	<style type="text/css" scoped>
:root::-webkit-scrollbar {
	width: 20px;
	background: #DDD;
}

:root::-webkit-scrollbar-thumb {
	border-top: 10px solid green;
	border-right: 10px solid blue;
	border-bottom: 10px solid purple;
	border-left: 10px solid red;
}
	</style>
	
	<style scoped>
	:root {
		background: green;
	}
	:root::-webkit-scrollbar {
		background: red;
	}
	p, a {
		color: red;
	}
	
	</style>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script type="text/javascript">
alert('ok');
</script>

<script type="text/javascript">
var scopedPolyFill = ( function ( doc ) {
    
    // check for support of scoped and certain option
    var compat = (function ()
    {
        var check           = doc.createElement( 'style' )
        ,   DOMStyle        = 'undefined' !== typeof check.sheet ? 'sheet' : 'undefined' !== typeof check.getSheet ? 'getSheet' : 'styleSheet'
        ,   scopeSupported  = '' === check.scoped
        ,   testSheet
        ,   DOMRules
        ,   testStyle
        ;

        // we need to append it to the DOM because the DOM element at least FF keeps NULL as a sheet utill appended
        // and we can't check for the rules / cssRules and changeSelectorText untill we have that
        doc.body.appendChild( check );
        testSheet           = check[ DOMStyle ];

        // add a test styleRule to be able to test selectorText changing support
        // IE doesn't allow inserting of '' as a styleRule
        testSheet.addRule ? testSheet.addRule( 'c', 'blink' ) : testSheet.insertRule( 'c{}', 0 );

        // store the way to get to the list of rules
        DOMRules            = testSheet.rules ? 'rules' : 'cssRules';

        // cache the test rule (its allways the first since we didn't add any other thing inside this <style>
        testStyle           = testSheet[ DOMRules ][ 0 ];

        // try catch it to prevent IE from throwing errors
        // can't check the read-only flag since IE just throws errors when setting it and Firefox won't allow setting it (and has no read-only flag
        try{
            testStyle.selectorText = 'd';
        }catch( e ){}

        // check if the selectorText has changed to the value we tried to set it to
        // toLowerCase() it to account for browsers who change the text
        var changeSelectorTextAllowed = 'd' === testStyle.selectorText.toLowerCase();

        // remove the <style> to clean up
        check.parentNode.removeChild( check );

        // return the object with the appropriate flags
        return {
            scopeSupported: scopeSupported
        ,   rules: DOMRules
        ,   sheet: DOMStyle
        ,   changeSelectorTextAllowed: changeSelectorTextAllowed
        }
    } ) ();

    // scope is supported? just return
    if ( compat.scopeSupported )
        return;

    // this was called so we "scope" all the <style> nodes which need to be scoped now
    var scopedSheets
    ,   i
    ,   idCounter = 0
    ;

    if ( doc.querySelectorAll ) {

        scopedSheets = doc.querySelectorAll( 'style[scoped]' );

    } else {

        var tempSheets = [];
        scopedSheets = doc.getElementsByTagName( 'style' );
        i = scopedSheets.length;

        while ( i-- ) {

            if ( '' === scopedSheets[ i ].getAttribute( 'scoped' ) )
                tempSheets.push( scopedSheets[ i ] );
            // Array.prototype.apply doen't work in the browsers this is eecuted for so we have to use array.push()

        }

        scopedSheets = tempSheets;

    }

    i = scopedSheets.length;
    while ( i-- )
        scopeIt( scopedSheets[ i ] );

    // make a function so we can return it to enable the "scoping" of other <styles> which are inserted later on for instance
    function scopeIt( styleNode, jQueryItem ) {

        // catch the second argument if this was called via the $.each
        if ( jQueryItem )
            styleNode = jQueryItem;

        // check if we received a <style> node
        // if not chcek if it's a jQuery object and go from there
        // if no <style> and no jQuery? return to avoid errors
        if ( !styleNode.nodeName ) {

            if ( !styleNode.jquery )
                return;
            else
                return styleNode.each( scopeIt );

        }

        if ( 'style' !== styleNode.nodeName.toLowerCase() )
            return;

        // init some vars
        var sheet       = styleNode[ compat.sheet ]
        ,   allRules    = sheet[     compat.rules ]
        ,   par         = styleNode.parentNode
        ,   id          = par.id || ( par.id = 'scopedByScopedPolyfill_' + ++idCounter )
        ,   glue        = ''
        ,   index       = allRules.length || 0
        ,   rule
        ,   selector
        ,   styleRule
        ;

         // get al the ids from the parents so we are as specific as possible
         // if no ids are found we always have the id which is placed on the <style>'s parentNode
        while ( par ) {

            if ( par.id )
                glue = '#' + par.id + ' ' + glue;

            par = par.parentNode;

        }

        // iterate over the collection from the end back to account for IE's inability to insert a styleRule at a certain point
        // it can only add them to the end...
        while ( index-- ) {

            rule = allRules[ index ];
            
            selector = glue + ' ' + rule.selectorText.split( ',' ).join( ', ' + glue );
            
            console.log('');
            console.log(selector, '|' + glue + '|');
            // replace :root by the scoped element
            selector = selector.replace(new RegExp('[\ ]+:root', 'gi'), '');
			
			console.log(selector);
			
            // we can just change the selectorText for this one
            if ( compat.changeSelectorTextAllowed ) {

                rule.selectorText = selector;

            } else {// or we need to remove the rule and add it back in if we cant edit the selectorText

                /*
                 * IE only adds the normal rules to the array (no @imports, @page etc)
                 * and also does not have a type attribute so we check if that exists and execute the old IE part if it doesn't
                 * all other browsers have the type attribute to show the type
                 *  1 : normal style rules  <---- use these ones
                 *  2 : @charset
                 *  3 : @import
                 *  4 : @media
                 *  5 : @font-face
                 *  6 : @page rules
                 *
                 */
                if ( !rule.type || 1 === rule.type ) {

                    styleRule = rule.style.cssText;
                    sheet.removeRule    ? sheet.removeRule( index )             : sheet.deleteRule( index );
                    sheet.addRule       ? sheet.addRule( selector, styleRule )  : sheet.insertRule( selector + '{' + styleRule + '}', index );

                }
            }
        }
    }

    return scopeIt;

} ) ( document );
</script>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"html"}