☰

scrol1-滚动条自动隐藏变色及仿scrol1 style改写

ios scroll bar for chrome

// ==UserScript==
// @name           scrol1-滚动条自动隐藏变色及仿scrol1 style改写 
// @namespace     http://userstyles.org
// @description	  ios scroll bar for chrome
// @author        boogiefer
// @homepage      https://userstyles.org/styles/58438
// @include       http://*/*
// @include       https://*/*
// @run-at        document-start
// @require      http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
// @version       0.20111226011611
// ==/UserScript==
(function() {var css = [
"::-webkit-scrollbar {",
    "   width:15px;",
     "  height:15px;",
 	"}",
"::-webkit-scrollbar-track-piece {",
"        background-color:#fff;",
"        opacity: 0;",
      "}",
"::-webkit-scrollbar-thumb:vertical{",
"  background-color:rgba(0,0,0,0.2);",
"  height:20px;",
"  border-right:4px solid #fff;",
"  border-left:4px solid #fff;",
     "}",
" ::-webkit-scrollbar-thumb:horizontal{", 
"  background-color:rgba(0,0,0,0.2);",
"  width:20px;",
"  border-top:4px solid #fff;",
"  border-bottom:4px solid #fff;",
   "}",
"::-webkit-scrollbar-thumb:hover{",
"  background-color:rgba(0,0,0,0.4);",
   "}",
 " body::-webkit-scrollbar{display:none;};",
  " html::-webkit-scrollbar{display:none;};",
 " .wsx_scroll{",
 " z-index:999999999999;",
 " width:30px;",
 " position: fixed;",
 " right: 0px;",
 " top: 0px;",
 " display:none;",
 " -webkit-user-select: none;",
 " trtransition:opacity 200ms linear;",
 "  padding:0;",
 "  margin:0;",
     "}",
" .wsx_scroll_bar{",
" position: relative;",
" height:100%; pointer-events: none;",
" - webkit-user-select: none;",
" padding:0;",
"  margin:0;",
 "}",
" .wsx_fade{",
" z-index:9999999999999;",
"  position: fixed;",
"  right: 0px;",
"  top: 0px;",
"   width: 45px;",
" display:block;",
"  height:100%;",
"  pointer-events: none;",
"  -webkit-user-select: none;",
"  padding:0;",
"  margin:0;",
"}",
	"}"
].join("\n");
if (typeof GM_addStyle != "undefined") {
	GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
	PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
	addStyle(css);
} else {
	var node = document.createElement("style");
	node.type = "text/css";
	node.appendChild(document.createTextNode(css));
	var heads = document.getElementsByTagName("head");
	if (heads.length > 0) {
		heads[0].appendChild(node); 
	} else {
		// no head yet, stick it whereever
		document.documentElement.appendChild(node);
	}
}
})();
$(function(){
var config = {
	'backgroundColor': ['#f60', '#0A90CF', '#CC0F16', '#111', '#427700', '#E00'],
	'opacity': 0.6,
	'borderRadius': '3px',
	'width': '6px',
	'left': '19px'
     };
var rand = parseInt(6*Math.random());
$('<div class="wsx_fade"></div><div class="wsx_scroll"><div class="wsx_scroll_bar"></div></div>').appendTo('body');
$('.wsx_scroll_bar').css({'background-color': config.backgroundColor[rand], 'opacity': config.opacity, '-webkit-border-radius': config.borderRadius, 'width': config.width, 'left': config.left});


var content = document.documentElement?document.documentElement:document.body;
var change = $(window).height();
var scrollShow = false;
var wsx_t;

function upScrollHeight() {
	clearTimeout(wsx_t);
	var wHeight = $(window).height();
	//var docElemProp = window.document.documentElement.clientHeight;  
    //var wHeight = window.document.compatMode === "CSS1Compat" && docElemProp || window.document.body.clientHeight || docElemProp;  
	var dHeight = $(document).height();
	//var dHeight = window.document.height;
	var tmpScroll = $('.wsx_scroll');
	if(dHeight<=wHeight) {
		if (scrollShow === true) {
			tmpScroll.hide();
		}
		scrollShow = false;
    } else {
		tmpScroll.css({'display':'block', 'opacity':1 ,'pointer-events':'none'});
		scrollShow = true;
	}
	var scrollHeight = wHeight/dHeight*wHeight > 30 ? wHeight/dHeight*wHeight : 30;
	var top = $(document).scrollTop()/(dHeight-wHeight)*(wHeight-scrollHeight);
    tmpScroll.css({'top':top});
	tmpScroll.height(scrollHeight);

	wsx_t=setTimeout(function(){
		tmpScroll.css({'opacity':0, 'pointer-events':'none'});
		scrollShow = false;
	},500);
	//console.log(wHeight+' '+dHeight);
}
//setInterval use $().fadeOut() and i'll stop. why?
var init = window.setInterval(function() {
	if(change != content.scrollHeight) {
		change = content.scrollHeight;
		upScrollHeight();
	}
},100);

$(window).bind('scroll',function(){
	upScrollHeight();
});

$(window).bind('resize',function(){
	upScrollHeight();
});

var always;
var mousedown = false;
var in_mousedown = false;
var startY;
var Y;

$(window).bind('mousemove',function(event){
	if((content.clientWidth-event.clientX) < 40) {
	//console.log(content.clientWidth-event.clientX);
		if (scrollShow === false) {
			upScrollHeight();
		}
		clearTimeout(wsx_t);
		always = true;	
	} else {
		if (always === true) {
			//console.log('always:'+always);
			always = false;
			wsx_t=setTimeout(function(){
				$('.wsx_scroll').css({'opacity':0, 'pointer-events':'none'});
				scrollShow = false;
			},500);
		}
	}
	if (mousedown === true) {
	$('.wsx_fade').css({'pointer-events':'auto'});
		var endY=event.clientY;
		var top=endY-startY+Y;
		if(top<0){
			top=0;
		}
		var max_height=$(window).height()-$('.wsx_scroll').height();
		if(top>max_height){
			top=max_height;
		}
		var scroll_top=top/($(window).height()-$('.wsx_scroll').height())*($(document).height()-$(window).height());
		$(document).scrollTop(scroll_top);
	}

});

$(window).bind('mousedown',function(event){
	startY = event.clientY;
	Y=$(document).scrollTop()/($(document).height()-$(window).height())*($(window).height()-$('.wsx_scroll').height());
	if((content.clientWidth-event.clientX) < 40 && (content.clientWidth-event.clientX) >= 0) {		
		console.log(content.clientWidth-event.clientX);
		mousedown=true;
		window.document.onselectstart=function(){
			return false;
		};
	}
});
$(window).bind('mouseup',function(event){
	document.onselectstart=null;
	mousedown=false;
	$('.wsx_fade').css({'pointer-events':'none'});
});

});