cevek · June 11, 2016 14:14
diff --git a/custom-scroll.html b/custom-scroll.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        html {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        [data-scroll-wrapper] {
            overflow: hidden;
            position: relative;
        }

        [data-scroll] {
            overflow-y: scroll;
            height: 100%;
        }

        .body-wrapper {
            height: 2000px;
        }

        .test-wr {
            width: 300px;
            height: 300px;
        }

        .test {

        }


        .test-inner {
            height: 800px;
            background: linear-gradient(to top, #fefcea, #f1da36);
        }
    </style>
 </head>
 <body data-scroll-wrapper>
 <div data-scroll>
    <div data-scroll-handle></div>
    <div class="body-wrapper">
        <div class="test-wr" data-scroll-wrapper>
            <div class="test" data-scroll>
                <div data-scroll-handle></div>
                <div class="test-inner">

                </div>
            </div>
        </div>
    </div>
 </div>
 <script type="text/javascript">

    function customScrollbars() {

        function createStyleSheet() {
            var style = document.createElement('style');
            document.head.appendChild(style);
            style.appendChild(document.createTextNode(""));
            return style.sheet;
        }

        var sheet = createStyleSheet();
 /*
        sheet.insertRule('[data-scroll-wrapper] {position: relative;}', 0);
        sheet.insertRule('[data-scroll]:before, [data-scroll]:after {opacity: 0; content: " "; position: absolute; right: 0; display: block; width: 20px; transition: opacity .3s;}', 0);
        sheet.insertRule('[data-scroll]:before {background: red; height: 100%;}', 0);
        sheet.insertRule('[data-scroll]:after {background: blue;}', 0);
        sheet.insertRule('[data-scroll]:hover:before, [data-scroll]:hover:after {opacity: 1;}', 0);
        sheet.insertRule('[data-scroll]{margin-right: -20px;}', 0);
 */

        sheet.insertRule('[data-scroll]:before, [data-scroll-handle] {opacity: 0; content: " "; position: absolute; right: 0; display: block; width: 20px; transition: opacity .3s;}', 0);
        sheet.insertRule('[data-scroll]:before {background: red; height: 100%;}', 0);
        sheet.insertRule('[data-scroll-handle]{background: blue;}', 0);
        sheet.insertRule('[data-scroll]:hover:before, [data-scroll]:hover > [data-scroll-handle] {opacity: 1;}', 0);
        sheet.insertRule('[data-scroll]{margin-right: -20px;}', 0);


        function bulb(e) {
            var target = e.target;
            var changedItems;
            while (target && target !== document) {
                var attr = target.getAttribute('data-scroll');
 //                var rule;
                /*if (attr === '') {
 //                    var id = '_'+Math.random().toString(33).substr(2, 3);
 //                    attr = target.setAttribute('data-scroll', id);
 //                    target.firstElementChild.id = id;
 //                    rule = sheet.cssRules.item(sheet.insertRule('[data-scroll="' + id + '"] > .handle{}', 0));
 //                    rule = sheet.cssRules.item(sheet.insertRule('#' + id + '{}', 0));
                    target.$rule = rule;
                }*/
                if (attr !== null) {
                    var rect = target.getBoundingClientRect();
                    var height = rect.height / target.scrollHeight * 100 + '%';
                    var top = (target.scrollTop) / (target.scrollHeight) * 100 + '%';
                    if (!changedItems) {
                        changedItems = [];
                    }
                    changedItems.push({/*rule: target.$rule, */element: target.firstElementChild, height: height, top: top});
                }
                target = target.parentNode;
            }
            if (changedItems) {
                for (var i = 0; i < changedItems.length; i++) {
                    var item = changedItems[i];
 //                    item.rule.style.height = item.height;
 //                    item.rule.style.top = item.top;
                    item.element.style.height = item.height;
                    item.element.style.top = item.top;
                }
            }
        }

        document.addEventListener('mousewheel', bulb)
        document.addEventListener('DOMMouseScroll', bulb)
        document.addEventListener('mouseover', bulb)
    }
    customScrollbars();
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style type="text/css">

	html {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	body {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	[data-scroll-wrapper] {
	overflow: hidden;
	position: relative;
	}

	[data-scroll] {
	overflow-y: scroll;
	height: 100%;
	}

	.body-wrapper {
	height: 2000px;
	}

	.test-wr {
	width: 300px;
	height: 300px;
	}

	.test {

	}


	.test-inner {
	height: 800px;
	background: linear-gradient(to top, #fefcea, #f1da36);
	}
	</style>
	</head>
	<body data-scroll-wrapper>
	<div data-scroll>
	<div data-scroll-handle></div>
	<div class="body-wrapper">
	<div class="test-wr" data-scroll-wrapper>
	<div class="test" data-scroll>
	<div data-scroll-handle></div>
	<div class="test-inner">

	</div>
	</div>
	</div>
	</div>
	</div>
	<script type="text/javascript">

	function customScrollbars() {

	function createStyleSheet() {
	var style = document.createElement('style');
	document.head.appendChild(style);
	style.appendChild(document.createTextNode(""));
	return style.sheet;
	}

	var sheet = createStyleSheet();
	/*
	sheet.insertRule('[data-scroll-wrapper] {position: relative;}', 0);
	sheet.insertRule('[data-scroll]:before, [data-scroll]:after {opacity: 0; content: " "; position: absolute; right: 0; display: block; width: 20px; transition: opacity .3s;}', 0);
	sheet.insertRule('[data-scroll]:before {background: red; height: 100%;}', 0);
	sheet.insertRule('[data-scroll]:after {background: blue;}', 0);
	sheet.insertRule('[data-scroll]:hover:before, [data-scroll]:hover:after {opacity: 1;}', 0);
	sheet.insertRule('[data-scroll]{margin-right: -20px;}', 0);
	*/

	sheet.insertRule('[data-scroll]:before, [data-scroll-handle] {opacity: 0; content: " "; position: absolute; right: 0; display: block; width: 20px; transition: opacity .3s;}', 0);
	sheet.insertRule('[data-scroll]:before {background: red; height: 100%;}', 0);
	sheet.insertRule('[data-scroll-handle]{background: blue;}', 0);
	sheet.insertRule('[data-scroll]:hover:before, [data-scroll]:hover > [data-scroll-handle] {opacity: 1;}', 0);
	sheet.insertRule('[data-scroll]{margin-right: -20px;}', 0);


	function bulb(e) {
	var target = e.target;
	var changedItems;
	while (target && target !== document) {
	var attr = target.getAttribute('data-scroll');
	// var rule;
	/*if (attr === '') {
	// var id = '_'+Math.random().toString(33).substr(2, 3);
	// attr = target.setAttribute('data-scroll', id);
	// target.firstElementChild.id = id;
	// rule = sheet.cssRules.item(sheet.insertRule('[data-scroll="' + id + '"] > .handle{}', 0));
	// rule = sheet.cssRules.item(sheet.insertRule('#' + id + '{}', 0));
	target.$rule = rule;
	}*/
	if (attr !== null) {
	var rect = target.getBoundingClientRect();
	var height = rect.height / target.scrollHeight * 100 + '%';
	var top = (target.scrollTop) / (target.scrollHeight) * 100 + '%';
	if (!changedItems) {
	changedItems = [];
	}
	changedItems.push({/rule: target.$rule, /element: target.firstElementChild, height: height, top: top});
	}
	target = target.parentNode;
	}
	if (changedItems) {
	for (var i = 0; i < changedItems.length; i++) {
	var item = changedItems[i];
	// item.rule.style.height = item.height;
	// item.rule.style.top = item.top;
	item.element.style.height = item.height;
	item.element.style.top = item.top;
	}
	}
	}

	document.addEventListener('mousewheel', bulb)
	document.addEventListener('DOMMouseScroll', bulb)
	document.addEventListener('mouseover', bulb)
	}
	customScrollbars();
	</script>

	</body>
	</html>