☰

Smoothscroll

Smooth scrolling on pages using javascript and jquery

目前为 2016-10-27 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name Smoothscroll
  3. // @include     http*
  4. // @author       Creec Winceptor
  5. // @description  Smooth scrolling on pages using javascript and jquery
  6. // @namespace https://greasyfork.org/users/3167
  7. // @run-at document-idle
  8. // @grant    none
  9. // @grant       GM_getValue
  10. // @grant       GM_setValue
  11. // @grant       GM_registerMenuCommand
  12. // @version 1.2
  13. // ==/UserScript==
  14.  
  15. if (window.top != window.self)  //don't run on frames or iframes
  16.     return;
  17.  
  18.  
  19.  
  20.  
  21.  
  22. //DEFAULT SETTINGS HERE 
  23. //DO NOT CHANGE ANYTHING HERE ANYMORE, USE SCRIPT COMMANDS -> CONFIGURE SMOOTHSCROLL
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30. //Smoothness factor value (how strong the smoothing effect is)
  31. //values: 1-(infinite)
  32. var smoothness = 25;
  33.  
  34. //Scroll sensitivity
  35. //values: anything? (default 1.00)
  36. var sensitivity = 1;
  37.  
  38. //Acceleration sensitivity
  39. //values: anything? (default 1.50)
  40. var acceleration = 1;
  41.  
  42. //Refreshrate setting
  43. //values: 30-144 (default = 60/72/120/144 = same as your monitor hz)
  44. var baserefreshrate = 60;
  45.  
  46.  
  47. //Alternative scrolling multiplier
  48. //values: true/false (try to set this to true if scrolling is too slow/doesn't work)
  49. var alternative_sensitivity_multiplier = false;
  50.  
  51.  
  52. //CODE STARTS HERE
  53.  
  54. var minimal_jquery_version = 200;
  55.  
  56. //max retries
  57. var jquery_retry_max = 5;
  58. var jquery_retry_count = 0;
  59.  
  60.  
  61. var DEBUG = false;
  62.  
  63. var WEBKIT = false;
  64.  
  65. //this.$ = this.jQuery = jQuery.noConflict(true);
  66.  
  67. console.log("Loading smoothscroll...");
  68.  
  69. if (smoothness>100)
  70. {
  71. 	smoothness = 100;
  72. }
  73.  
  74. if (baserefreshrate <= 30 || baserefreshrate>144)
  75. {
  76. 	baserefreshrate = 144;
  77. }
  78. refreshrate = baserefreshrate;
  79.  
  80. var animationduration = Math.round(1000/refreshrate);
  81. //var relativeratio = Math.round(51-smoothness/2)/100;
  82. var relativeratio = Math.round(1/(1+smoothness*refreshrate/baserefreshrate)*100)/100;
  83. //var relativeratio = relativeratio;
  84.  
  85.  
  86.  
  87. var lastLoop = new Date;
  88. //var lastrefreshrate = 0;
  89. function gameLoop() { 
  90. 	var thisLoop = new Date;
  91.     var refreshrate0 = 1000 / (thisLoop - lastLoop + 1);
  92.     lastLoop = thisLoop;
  93. 	
  94. 	refreshrate = refreshrate + (refreshrate0-refreshrate)*0.1;
  95. 	refreshrate = Math.round(refreshrate);
  96. 	
  97. 	if (DEBUG)
  98. 	{
  99. 		console.log(refreshrate);
  100. 	}
  101.   //console.log(refreshrate);
  102. 	
  103. 	animationduration = Math.round(1000/(refreshrate));
  104. 	//var relativeratio = Math.round(51-smoothness/2)/100;
  105. 	relativeratio = Math.round(1/(1+smoothness*refreshrate/baserefreshrate)*100)/100;
  106. }
  107. gameLoop();
  108.  
  109.  
  110. function InitSmoothscroll()
  111. {
  112.   
  113.   //LoadConfig();
  114.  
  115.   //InitConfigmenu();
  116.  
  117. var startposition = false;
  118. var targetposition = 0;
  119. var position = 0;
  120.  
  121. var scrollfocus = ss$('body');
  122. var mousemoved = true;
  123.   
  124. function hasScrollBarVisible(element)
  125. {
  126.   //return (document.documentElement.scrollHeight !== document.documentElement.clientHeight);
  127.  
  128.   // Get the computed style of the body element
  129.   var cStyle = element.currentStyle||window.getComputedStyle(element, "");
  130.  
  131.   // Check the overflow and overflowY properties for "auto" and "visible" values
  132.   var scrollbar1 = cStyle.overflow == "scroll" || cStyle.overflowY == "scroll";
  133.  
  134. 	var scrollbar2 = cStyle.overflow == "auto" || cStyle.overflowY == "auto";
  135. 	
  136. 	var scrollbar = scrollbar1 || scrollbar2;
  137.  
  138.   return scrollbar;
  139. }
  140.  
  141.  
  142. function hasscrollbars(scrollfocus)
  143. {
  144. 	var hasvisiblescrollbars = hasScrollBarVisible(scrollfocus);
  145. 	var parentelement = ss$(scrollfocus).parent();
  146. 	if ( ss$(parentelement))
  147. 	{
  148. 		if (ss$(parentelement).is("textarea") || ss$(scrollfocus).is("textarea") || ss$(parentelement).is("article") || ss$(parentelement).is("article"))
  149. 		{
  150. 			return true;
  151. 		}
  152. 		else
  153. 		{
  154. 			if (ss$(parentelement).hasClass( "yt-scrollbar" ) || ss$(scrollfocus).hasClass( "yt-scrollbar" ))
  155. 			{
  156. 				return true;
  157. 			}
  158. 			return hasvisiblescrollbars;
  159. 		}
  160. 	}
  161. 	else
  162. 	{
  163. 		return hasvisiblescrollbars;
  164. 	}
  165. 	return false;
  166. }
  167.  
  168. function UpdatePosition(element)
  169. {
  170. 	gameLoop();
  171. 	
  172. 	var positiondelta = ss$(element)[0].getAttribute( "positiondelta" );
  173. 	//var smoothdelta = Math.sqrt(positiondelta*positiondelta*relativeratio);
  174. 	
  175. 	var smoothdelta = Math.sqrt(positiondelta*positiondelta*relativeratio);
  176. 	
  177. 	if (positiondelta<0)
  178. 	{
  179. 		smoothdelta = smoothdelta*(-1);
  180. 	}
  181. 	
  182. 	//var relative = position - ss$(element).scrollTop();
  183. 	//console.log("smoothdelta:" + smoothdelta);
  184. 	
  185. 	if (Math.abs( (positiondelta-smoothdelta)) <= 1 )
  186. 	{
  187. 		ss$(element).stop();
  188. 		ss$(element).animate({
  189. 			scrollTop: '+=' + Math.round(positiondelta)
  190. 		}, animationduration, "linear", function() {
  191. 			ss$(element).attr( "positiondelta",0 );
  192. 			ss$(element)[0].setAttribute( "positiondelta",0 );
  193. 			if (DEBUG)
  194. 			{
  195. 				ss$(element).css( "border", "1px solid red" );
  196. 			}
  197. 		});
  198. 	}
  199. 	else
  200. 	{
  201. 		
  202. 		ss$(element).stop();
  203. 		ss$(element).animate({
  204. 			scrollTop: '+=' + Math.round(smoothdelta)
  205. 		}, animationduration, "linear", function() {
  206. 			ss$(element).attr( "positiondelta",positiondelta-smoothdelta );
  207. 			ss$(element)[0].setAttribute("positiondelta",positiondelta-smoothdelta );
  208. 			UpdatePosition(element);
  209. 			if (DEBUG)
  210. 			{
  211. 				ss$(element).css( "border", "1px solid red" );
  212. 			}
  213. 		});
  214. 	}
  215. }
  216.  
  217.  
  218.  function MouseScroll (e) {
  219.    gameLoop();
  220.    
  221.    	var mul = 1;
  222. 	if (!WEBKIT || alternative_sensitivity_multiplier)
  223. 		mul = 40;
  224.    	var x = e.deltaX*mul;
  225.    	var y = e.deltaY*mul;
  226.    
  227.    	if (mousemoved)
  228.     {
  229.       scrollfocus = UpdateFocus(x,y);
  230.       mousemoved = false;
  231.     }
  232. 	 //
  233.    
  234. 	 var positiondelta = 0;
  235. 	 var lastscrolltop = 0;
  236.  
  237. 	 var parentelement = ss$(scrollfocus).parent();
  238. 	 
  239. 	 var rolled = y;
  240. 	 
  241. 	 	var lastscrolltop = ss$(scrollfocus).scrollTop();
  242. 	 	
  243.    		//ss$(scrollfocus).scrollTop(lastscrolltop+rolled);
  244. 	 	//if (ss$(scrollfocus).scrollTop()==lastscrolltop)
  245. 	 	if (!canscroll(scrollfocus, rolled))
  246. 		{
  247. 			if (!ss$(scrollfocus).is("html"))
  248. 			{
  249. 				//scrollfocus = ss$(scrollfocus);
  250. 				//focus = UpdateFocus(event);
  251. 				//return MouseScroll (event);
  252. 				//console.log("false");
  253. 				//return false;
  254. 				scrollfocus = UpdateFocus(x,y);
  255.               return false;
  256. 			}
  257. 			else
  258. 			{
  259.               	
  260.               	//console.log("true");
  261. 				return false;
  262. 			}
  263. 		}
  264. 	 	else
  265. 		{
  266. 			e.preventDefault();
  267. 		}
  268. 	    //ss$(scrollfocus).scrollTop(lastscrolltop);
  269.    
  270. 	 	 if (ss$(scrollfocus)[0].getAttribute("positiondelta")==undefined)
  271. 		 
  272. 		 {
  273. 			 positiondelta = 0;
  274. 			 //console.log("positiondelta: undefined");
  275. 		 }
  276. 	 else
  277. 		 {
  278. 			 positiondelta = ss$(scrollfocus)[0].getAttribute("positiondelta");
  279. 			 //console.log("positiondelta: " + positiondelta);
  280. 		 }
  281. 	 positiondelta = positiondelta*1;
  282.    
  283. 	 var direction = rolled/Math.abs(rolled);
  284. 	 //var positiondeltadelta = rolled*sensitivity + Math.sqrt(Math.abs(positiondelta/rolled))*acceleration*rolled;
  285. 	 
  286. 	 //var positiondeltadelta = rolled*(sensitivity+Math.sqrt(Math.abs(positiondelta))*acceleration);
  287. 	 
  288. 	 var positiondeltadelta = Math.round(rolled*sensitivity + Math.sqrt(Math.abs(positiondelta-rolled*sensitivity))*acceleration*rolled*0.05/sensitivity);
  289. 	 
  290. 	 positiondelta = positiondelta + positiondeltadelta;
  291. 	
  292. 	 ss$(scrollfocus)[0].setAttribute("positiondelta",positiondelta );
  293. 	 
  294. 	 
  295. 	 UpdatePosition(ss$(scrollfocus));
  296. 	 
  297. 	 return true;
  298.  }
  299.  
  300.  function canscroll(element, dir)
  301. {
  302.   	if (dir>0)
  303.     {
  304.       dir = 1;
  305.     }
  306.   	else
  307.     {
  308.       dir = -1;
  309.     }
  310. 	var scrollable = ss$(element);
  311. 	var lastscrolltop = ss$(scrollable).scrollTop();
  312. 	ss$(scrollable).scrollTop(lastscrolltop+dir);
  313. 	if (ss$(scrollable).scrollTop()==lastscrolltop && dir!=0)
  314. 	{
  315. 		ss$(scrollable).scrollTop(lastscrolltop);
  316. 		return false;
  317. 	}
  318. 	else
  319. 	{
  320. 		ss$(scrollable).scrollTop(lastscrolltop);
  321. 		return true;
  322. 	}
  323. 	
  324. }
  325.  
  326. function UpdateFocus(x,y) {
  327. 	if (scrollfocus)
  328.       {
  329.         //ss$(scrollfocus)[0].setAttribute( "positiondelta",0 );
  330.         ss$(scrollfocus).stop();
  331.       }
  332. 	var dir = y;
  333. 	 	var nodelist = document.querySelectorAll( ":hover" );
  334. 		//ss$(nodelist).stop();
  335.   	//console.log(nodelist);
  336. 	 	if (WEBKIT)
  337.         {
  338.         	scrollfocus = ss$('body');
  339.         }
  340.   		else
  341.         {
  342.             scrollfocus = ss$('html');
  343.         }
  344.   		
  345. 	 	for (var i = nodelist.length-1; i >= 0 ; i--) { 
  346. 				//var parent = nodelist[i-1];
  347. 			  var newfocus = nodelist[i];
  348. 				if (DEBUG)
  349. 				{
  350. 					ss$(newfocus).css( "border", "1px solid blue" );
  351. 					//var debugtimer = setTimeout(function(){ ss$(newfocus).css( "border", "0px solid white" ); }, 1000);
  352. 				}
  353. 				//if (ss$(newfocus).hasScrollBar3() && hasScrollBarVisible(newfocus) && canscroll(newfocus, dir) && hasscrollbars(newfocus))
  354. 				if (canscroll(newfocus, dir) && hasscrollbars(newfocus))
  355. 				{
  356. 					scrollfocus = ss$(newfocus);
  357. 					return newfocus;
  358. 				}
  359.  		}
  360.  
  361. 	 return scrollfocus;
  362.  }
  363. 	
  364.   ss$('html').bind({
  365.     
  366. 			 //mousewheel: function(e) {
  367. 			//if (DEBUG)
  368. 			//{
  369. 			//	console.log(scrollfocus);
  370. 			//}
  371. 			  //console.log("scrolling");
  372. 			  //MouseScroll(e.originalEvent);
  373. 		  //},
  374. 	mousemove: function(e) {
  375.       mousemoved = true;
  376.     },
  377.     
  378.     mousedown: function(e) {
  379.       if (DEBUG)
  380.       {
  381.         console.log(scrollfocus);
  382.       }
  383.       if (scrollfocus)
  384.       {
  385.         ss$(scrollfocus)[0].setAttribute( "positiondelta",0 );
  386.         //ss$(scrollfocus).stop();
  387.       }
  388.       scrollfocus = UpdateFocus(0,0);
  389.       //console.log("click");
  390.     }
  391.   });
  392. //Init(window);
  393.  
  394. 	
  395.   
  396. document.documentElement.addEventListener("wheel", function(e){
  397.     MouseScroll(e);
  398.   //console.log("scrolling");
  399. });
  400.   
  401.   /*var oldpos = ss$('body').scrollTop();
  402.   ss$('body').scrollTop(1);
  403.   var iswebkit = ss$('body').scrollTop()>0;
  404.   ss$('body').scrollTop(oldpos);*/
  405.  
  406.   //WEBKIT = 'webkitRequestAnimationFrame' in window;
  407.   WEBKIT = document.compatMode == 'CSS1Compat' || document.compatMode == "BackCompat";
  408.   
  409.   //console.log("window: " + window);
  410.   console.log("Smoothscroll initiated! Webkit: " + WEBKIT);
  411. }
  412.  
  413. var JQUERY = false;
  414. var OWNJQUERY = false;
  415. var OLDJQUERY = false;
  416.  
  417. var old$;
  418. var oldjQuery;
  419.  
  420. var ss$;
  421.  
  422. function jQueryVersion(temp$)
  423. {
  424.   if (typeof temp$ == 'undefined' || typeof temp$.fn == 'undefined' || typeof temp$.fn.jquery == 'undefined')
  425.   {
  426.     return 0;
  427.   }
  428.  
  429.   var versiontable = temp$.fn.jquery.split('.');
  430.   var version = 0;
  431.   for (var i = versiontable.length-1; i >= 0; i--) { 
  432.     var power = versiontable.length-i;
  433.     version += Math.pow(10,power-1)*versiontable[i];
  434.   }
  435.   return version;
  436. }
  437.  
  438.  
  439. function LoadConfig()
  440. {
  441.   smoothness = GM_getValue( 'smoothness', smoothness );
  442.   sensitivity = GM_getValue( 'sensitivity', sensitivity );
  443.   acceleration = GM_getValue( 'acceleration', acceleration );
  444.   baserefreshrate = GM_getValue( 'baserefreshrate', baserefreshrate );
  445.   //alternative_sesitivity_multiplier = GM_getValue( 'alternative_sesitivity_multiplier', alternative_sesitivity_multiplier );
  446.   console.log("Config for smoothscroll loaded!")
  447. }
  448.  
  449. function SaveConfig()
  450. {
  451.   GM_setValue( 'smoothness', document.getElementById('ss-smoothness').value)
  452.   GM_setValue( 'sensitivity', document.getElementById('ss-sensitivity').value)
  453.   GM_setValue( 'acceleration', document.getElementById('ss-acceleration').value)
  454.   GM_setValue( 'baserefreshrate', document.getElementById('ss-baserefreshrate').value)
  455.   //console.log(document.getElementById('ss-alternative_sesitivity_multiplier').checked)
  456.   console.log("Config for smoothscroll saved!")
  457. }
  458.  
  459. function InitConfigmenu()
  460. {
  461.   	console.log("Initiating smoothscroll config...");
  462.     var configbar = document.createElement('div');
  463.     configbar.setAttribute("id","ss-configbar");
  464.  	
  465.   	configbar.innerHTML = '<div style="display:block; width: 100%; height: auto; border: 0px solid #aaaaaa; background-color: grey;">Config page for smoothscroll (refresh page for changes to apply!) Made by: Creec Winceptor</div><div id="ss-config" style="margin:3px; display:block; width: auto; height: auto; border: 0px solid #554433;"><table style="width:auto;"><tr><td>Smoothness</td><td><input type="number" id="ss-smoothness" min="0" max="100" value="' + smoothness + '"></td><td> Smoothness factor value (how strong the smoothing effect is)</td></tr><tr><td>Sensitivity</td><td><input type="number" id="ss-sensitivity" min="0" max="100" value="' + sensitivity + '"></td><td> Scroll sensitivity (duh)</td></tr><tr><td>Acceleration</td><td><input type="number" id="ss-acceleration" min="0" max="100" value="' + acceleration + '"></td><td> Acceleration of continuous scroll action (saves your finger)</td></tr><tr><td>Refreshrate</td><td><input type="number" id="ss-baserefreshrate" min="1" max="100" value="' + baserefreshrate + '"></td><td>Refreshrate of scrollanimation (60Hz default)</td></tr></table></div><div style="width: 100%; height: auto; text-align: center; background-color: grey;"><input id="ss-save" type="button" value="Save config" style="width: 44%; height: auto; border: 0px solid #aaaaaa; margin: 3px"/><input id="ss-close" type="button" value="Close config" style="width: 44%; height: auto; border: 0px solid #aaaaaa; margin: 3px"/><div>';
  466.   	
  467.   	
  468.     var configparent = document.getElementsByTagName("body")[0];
  469.   	configbar.style.width = '100%';  
  470.   	configbar.style.display = 'none';  
  471.   	configbar.style.position = 'absolute';
  472. 	configbar.style.zIndex = '9999';
  473.   	configbar.style.backgroundColor = 'white';
  474.   
  475.   	configparent.insertBefore(configbar, configparent.childNodes[0]);
  476.   	
  477.     ss$("#ss-close").click(function() {
  478.       //ss$("#ss-config").animate({
  479.       //  height: '0'
  480.       //}, 100);
  481.       ss$("#ss-configbar").hide("slow");
  482.     });
  483.      ss$("#ss-save").click(function() {
  484.       SaveConfig();
  485.     });
  486.   
  487.   //ss$("#ss-configbar").hide();
  488. }
  489.  
  490. function ConfigSmoothscroll()
  491. {
  492.   if (typeof ss$ == 'undefined'){
  493.     alert("Smoothscroll is not running properly on this page!");
  494.     return;
  495.   }
  496.   //ss$("#ss-config").animate({
  497.   //  height: '100px'
  498.   //}, 100);
  499.   ss$("#ss-configbar").show("slow");
  500.   ss$("html, body").animate({ scrollTop: 0 }, "slow");
  501. }
  502.  
  503. function LoadjQuery(loading)
  504. {
  505.   if (loading)
  506.   {
  507.     console.log("Waiting for jQuery...");
  508. 	if (typeof $ == 'undefined' || typeof jQuery == 'undefined' || jQueryVersion($)<minimal_jquery_version)
  509.     {
  510.       if (jquery_retry_count<jquery_retry_max)
  511.       {
  512.         jquery_retry_count++;
  513.         setTimeout(function() {
  514.             LoadjQuery(true);
  515.         }, 100);
  516.       }
  517.       else
  518.       {
  519.         console.log("Failed to load smoothscroll!");
  520.         if (typeof old$ != 'undefined') {
  521.           $ = old$;
  522.         }
  523.         if (typeof oldjQuery != 'undefined') {
  524.           jQuery = oldjQuery;
  525.         } 
  526.       }
  527.     }
  528.     else
  529.     {
  530.       ss$ = $;
  531.       ssjQuery = jQuery;
  532.       console.log("jQuery loaded!");
  533.       
  534.       if (typeof old$ != 'undefined') {
  535.         $ = old$;
  536.       }
  537.       if (typeof oldjQuery != 'undefined') {
  538.         jQuery = oldjQuery;
  539.       } 
  540.       console.log("Page jQuery version: " + jQueryVersion(old$));
  541.       console.log("Script jQuery version: " + jQueryVersion(ss$));
  542.       
  543.       InitSmoothscroll();
  544.     }
  545.   }
  546.   else
  547.   {
  548.     console.log("Loading own jQuery...");
  549. 	jquery_retry_count = 0;
  550.     
  551.     var filename = "https://code.jquery.com/jquery-2.2.3.js";
  552.     var fileref = document.createElement('script');
  553.     fileref.setAttribute("type","text/javascript");
  554.     fileref.setAttribute("src", filename);
  555.  
  556.     if (typeof fileref!="undefined")
  557.     {
  558.       var scriptparent = document.getElementsByTagName("head")[0];
  559.  
  560.       if (typeof scriptparent=="undefined")
  561.       {
  562.         var scriptparent = document.createElement('head');
  563.         document.getElementsByTagName("html")[0].appendChild(scriptparent);
  564.       }
  565.       scriptparent.appendChild(fileref);
  566.     }
  567.     
  568.     LoadjQuery(true);
  569.   }
  570. }
  571.  
  572.  
  573. function Init()
  574. {
  575.  
  576.   if (typeof ss$ == 'undefined' ) 
  577.   {
  578.     var sitejquery = !(typeof $ == 'undefined' || typeof jQuery == 'undefined');
  579.     if (sitejquery && jQueryVersion($)>=minimal_jquery_version) 
  580.     {
  581.       ss$ = $;
  582.       ssjQuery = jQuery;
  583.       console.log("Reusing page jQuery...");
  584.       console.log("Page jQuery version: " + jQueryVersion($));
  585.       InitSmoothscroll();
  586.     }
  587. 	else
  588.     {
  589.         if (typeof $ != 'undefined' && typeof old$ == 'undefined') 
  590.         {
  591.           old$ = $;
  592.         }
  593.         if (typeof jQuery != 'undefined' && typeof oldjQuery == 'undefined') 
  594.         {
  595.           oldjQuery = jQuery;
  596.         }
  597.       
  598.       	LoadjQuery(false);   	
  599.     }
  600.   }
  601. }
  602.  
  603. if (typeof ss$ == 'undefined'){
  604. 	console.log("Initiating smoothscroll...");
  605. 	Init();
  606. 	//InitSmoothscroll();	
  607. 	GM_registerMenuCommand("Configurate smoothscroll", ConfigSmoothscroll);
  608. }
  609. else
  610. {
  611.   console.log("Smoothscroll already loaded!");
  612. }