☰

Smoothscroll

Smooth scrolling everywhere using javascript

当前为 2016-11-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name Smoothscroll
  3. // @include     http*
  4. // @author       Creec Winceptor
  5. // @description  Smooth scrolling everywhere using javascript
  6. // @namespace https://greasyfork.org/users/3167
  7. // @run-at document-load
  8. // @grant    none
  9. // @grant       GM_getValue
  10. // @grant       GM_setValue
  11. // @grant       GM_registerMenuCommand
  12. // @version 2.2
  13. // ==/UserScript==
  14.  
  15. if (window.top != window.self)  //don't run on frames or iframes
  16.     return;
  17.  
  18. //DEFAULT SETTINGS HERE 
  19. //DO NOT CHANGE ANYTHING HERE ANYMORE, USE SCRIPT COMMANDS -> CONFIGURE SMOOTHSCROLL
  20.  
  21.  
  22. //Smoothness factor value (how strong the smoothing effect is)
  23. //values: 1-(infinite)
  24. var smoothness = 50;
  25.  
  26. //Scroll sensitivity
  27. //values: anything? (default 1.00)
  28. var sensitivity = 1;
  29.  
  30. //Acceleration sensitivity
  31. //values: anything? (default 1.50)
  32. var acceleration = 1;
  33.  
  34. //Refreshrate setting
  35. //values: 30-144 (default = 60/72/120/144 = same as your monitor hz)
  36. var refreshrate = 60;
  37.  
  38.  
  39. //Alternative scrolling multiplier
  40. //values: true/false (try to set this to true if scrolling is too slow/doesn't work)
  41. var alternative_sensitivity_multiplier = false;
  42.  
  43.  
  44. //CODE STARTS HERE
  45.  
  46. var DEBUG = false;
  47.  
  48. var WEBKIT = false;
  49.  
  50. console.log("Loading smoothscroll...");
  51.  
  52. var baserefreshrate = 60; //DO NOT CHANGE THIS EVER
  53. if (smoothness>100)
  54. {
  55. 	smoothness = 100;
  56. }
  57.  
  58. if (refreshrate <= 30 || refreshrate>144)
  59. {
  60. 	refreshrate = 144;
  61. }
  62.  
  63. function InitSmoothscroll()
  64. {
  65.   
  66.   LoadConfig();
  67.  
  68.   InitConfigmenu();
  69.  
  70. var startposition = false;
  71. var targetposition = 0;
  72. var position = 0;
  73.  
  74. //var scrollfocus = //ss$('body');
  75. var scrollfocus = document.body;
  76. var mousemoved = true;
  77.   
  78. function hasScrollBarVisible(element)
  79. {
  80.   //return (document.documentElement.scrollHeight !== document.documentElement.clientHeight);
  81.  
  82.   // Get the computed style of the body element
  83.   var cStyle = element.currentStyle||window.getComputedStyle(element, "");
  84.  
  85.   // Check the overflow and overflowY properties for "auto" and "visible" values
  86.   var scrollbar1 = cStyle.overflow == "scroll" || cStyle.overflowY == "scroll";
  87.  
  88. 	var scrollbar2 = cStyle.overflow == "auto" || cStyle.overflowY == "auto";
  89. 	
  90. 	var scrollbar = scrollbar1 || scrollbar2;
  91.  
  92.   return scrollbar;
  93. }
  94.  
  95.  
  96. function hasscrollbars(scrollfocus)
  97. {
  98. 	var hasvisiblescrollbars = hasScrollBarVisible(scrollfocus);
  99. 	return hasvisiblescrollbars;
  100. 	
  101. 	/*
  102. 	var parentelement = //ss$(scrollfocus).parent();
  103. 	if ( //ss$(parentelement))
  104. 	{
  105. 		if (//ss$(parentelement).is("textarea") || //ss$(scrollfocus).is("textarea") || //ss$(parentelement).is("article") || //ss$(parentelement).is("article"))
  106. 		{
  107. 			return true;
  108. 		}
  109. 		else
  110. 		{
  111. 			if (//ss$(parentelement).hasClass( "yt-scrollbar" ) || //ss$(scrollfocus).hasClass( "yt-scrollbar" ))
  112. 			{
  113. 				return true;
  114. 			}
  115. 			return hasvisiblescrollbars;
  116. 		}
  117. 	}
  118. 	else
  119. 	{
  120. 		return hasvisiblescrollbars;
  121. 	}
  122. 	return false;
  123. 	*/
  124. }
  125.  
  126. var scroll_timeout = null;
  127.  
  128. function UpdatePosition(element)
  129. {
  130. 	//gameLoop();
  131. 	var interpolation = 3;
  132.   
  133. 	var animationduration = Math.round(1000/(refreshrate*interpolation));
  134.   
  135.   	var relativeratio = Math.round(( 1/(1+smoothness)/interpolation*refreshrate/baserefreshrate )*1000)/1000;
  136. 	
  137. 	var positiondelta = scrollpositiondelta(element);
  138. 	
  139. 	
  140.                   
  141. 	var smoothdelta = Math.sqrt(positiondelta*positiondelta*relativeratio);
  142.   	var rounddelta = Math.ceil(smoothdelta);
  143.   	
  144. 	//var smoothdelta = positiondelta*relativeratio;
  145.   
  146. 	if (positiondelta<0)
  147. 	{
  148. 		smoothdelta = smoothdelta*(-1);
  149.       	rounddelta = rounddelta*(-1);
  150. 	}
  151.  
  152. 	if (Math.abs( rounddelta ) < 1 )
  153. 	{	
  154. 	
  155.       if (Math.abs( positiondelta ) > 1 )
  156.       {
  157.       	
  158.       	scroll_timeout = setTimeout(function() {
  159. 			element.scrollTop = element.scrollTop + rounddelta;
  160. 			scrollpositiondelta(element, positiondelta - rounddelta);
  161. 			UpdatePosition(element);
  162. 		  }, Math.abs(animationduration/smoothdelta) );
  163.       
  164.       }
  165.       else
  166.       {
  167.           scroll_timeout = setTimeout(function() {
  168.               element.scrollTop = element.scrollTop + rounddelta;
  169.               scrollpositiondelta(element, 0);
  170.             }, animationduration);
  171.  
  172.       }
  173. 		
  174.  
  175.  
  176. 	}
  177. 	else
  178. 	{
  179. 		  scroll_timeout = setTimeout(function() {
  180. 			element.scrollTop = element.scrollTop + rounddelta;
  181. 			scrollpositiondelta(element, positiondelta - rounddelta);
  182. 			UpdatePosition(element);
  183. 		  }, animationduration);
  184. 	}
  185. }
  186.  
  187.  
  188.  function MouseScroll (e) {
  189.  
  190.    	var mul = 1;
  191. 	if (!WEBKIT || alternative_sensitivity_multiplier)
  192. 		mul = 40;
  193.    	var x = e.deltaX*mul;
  194.    	var y = e.deltaY*mul;
  195.    
  196.    	if (mousemoved)
  197.     {
  198.       scrollfocus = UpdateFocus(x,y);
  199.       mousemoved = false;
  200.     }
  201.    
  202. 	 var positiondelta = 0;
  203. 	 var lastscrolltop = 0;
  204.  
  205. 	 var rolled = y;
  206. 	 	
  207. 	 	if (!canscroll(scrollfocus, rolled))
  208. 		{
  209. 			if (scrollfocus != document.documentElement)	
  210. 			{
  211. 				scrollfocus = UpdateFocus(x,y);
  212.               return false;
  213. 			}
  214. 			else
  215. 			{
  216.               	
  217.               	//console.log("true");
  218. 				return false;
  219. 			}
  220. 		}
  221. 	 	else
  222. 		{
  223. 			e.preventDefault();
  224. 		}
  225.    	 positiondelta = scrollpositiondelta(scrollfocus);
  226.    
  227. 	 var direction = rolled/Math.abs(rolled);
  228. 	 
  229. 	 var positiondeltadelta = Math.round(rolled*sensitivity + Math.sqrt(Math.abs(positiondelta-rolled*sensitivity))*acceleration*rolled*0.09/sensitivity);
  230. 	 
  231. 	 positiondelta = positiondelta*1 + positiondeltadelta*1;
  232. 	 
  233.   	 scrollpositiondelta(scrollfocus, positiondelta)
  234.  
  235. 	 clearTimeout(scroll_timeout);
  236. 	 
  237. 	 UpdatePosition(scrollfocus);
  238. 	 
  239. 	 return true;
  240.  }
  241.  
  242.  function canscroll(element, dir)
  243. {
  244.   	if (dir>0)
  245.     {
  246.       dir = 1;
  247.     }
  248.   	if (dir<0)
  249.     {
  250.       dir = -1;
  251.     }
  252.   	var checkradius = 3; //pixels to try scrolling
  253.   
  254.   	var canscroll0 = false;
  255.  
  256. 	var scrollable = element;
  257.  
  258. 	var lastscrolltop = scrollable.scrollTop;
  259.  
  260. 	scrollable.scrollTop = lastscrolltop+dir*checkradius;
  261.  
  262. 	if (scrollable.scrollTop!=lastscrolltop)
  263. 	{
  264. 		canscroll0 = true;
  265. 	}
  266.  
  267. 	scrollable.scrollTop = lastscrolltop;
  268.  
  269. 	return canscroll0;
  270. }
  271.   
  272.   
  273. function scrollpositiondelta(element, newdelta)
  274. {
  275.   	//var target = //ss$(element);
  276. 	var target = element;
  277.   	var delta = 0;
  278.   	if (newdelta!=undefined)
  279.     {
  280.       //console.log(dir);
  281.       var dir = 0;
  282.       if (newdelta>0)
  283.       {
  284.         dir = 1;
  285.       }
  286.       if (newdelta<0)
  287.       {
  288.         dir = -1;
  289.       }
  290. 	  target.setAttribute("positiondelta", newdelta );
  291.  
  292.       delta = newdelta;
  293.     }
  294. 	else
  295.     {
  296. 		var olddelta = target.getAttribute("positiondelta");
  297.       if (olddelta!=undefined)
  298.       {
  299.       	delta = olddelta;
  300.       }
  301.     }
  302.   	return delta*1;
  303. }
  304.  
  305. function UpdateFocus(x,y) {
  306. 	if (scrollfocus)
  307.       {
  308.         //scrollpositiondelta(scrollfocus, 0);
  309.         //ss$(scrollfocus).stop();
  310.       }
  311. 	var dir = y;
  312. 	 	var nodelist = document.querySelectorAll( ":hover" );
  313. 	 	if (WEBKIT)
  314.         {
  315.         	//scrollfocus = //ss$('body');
  316. 			scrollfocus = document.body;
  317.         }
  318.   		else
  319.         {
  320.             //scrollfocus = //ss$('html');
  321. 			scrollfocus = document.documentElement;
  322.         }
  323.   		
  324. 	 	for (var i = nodelist.length-1; i >= 0 ; i--) { 
  325. 			  var newfocus = nodelist[i];
  326. 				if (canscroll(newfocus, dir) && hasscrollbars(newfocus))
  327. 				{
  328. 					scrollfocus = newfocus;
  329. 					return newfocus;
  330. 				}
  331.  		}
  332.  
  333. 	 return scrollfocus;
  334.  }
  335. 	
  336.   /*ss$('html').bind({
  337.     
  338. 	mousemove: function(e) {
  339.       mousemoved = true;
  340.     },
  341.     
  342.     mousedown: function(e) {
  343.       if (DEBUG)
  344.       {
  345.         console.log(scrollfocus);
  346.       }
  347.       if (scrollfocus)
  348.       {
  349.         scrollpositiondelta(scrollfocus, 0);
  350.         ////ss$(scrollfocus).stop();
  351.       }
  352.       scrollfocus = UpdateFocus(0,0);
  353.       //console.log("click");
  354.     }
  355.   });
  356. 	*/
  357. 	
  358.   
  359. document.documentElement.addEventListener("wheel", function(e){
  360.     MouseScroll(e);
  361. 	mousemoved = true;
  362.   //console.log("scrolling");
  363. });
  364.   
  365.  
  366.   //WEBKIT = 'webkitRequestAnimationFrame' in window;
  367.   WEBKIT = document.compatMode == 'CSS1Compat' || document.compatMode == "BackCompat";
  368.   
  369.   //console.log("window: " + window);
  370.   console.log("Smoothscroll loaded! Webkit: " + WEBKIT);
  371.   
  372.   $smoothscroll$ = true;
  373. }
  374.  
  375. function LoadConfig()
  376. {
  377.   smoothness = GM_getValue( 'smoothness', smoothness );
  378.   sensitivity = GM_getValue( 'sensitivity', sensitivity );
  379.   acceleration = GM_getValue( 'acceleration', acceleration );
  380.   refreshrate = GM_getValue( 'refreshrate', refreshrate );
  381.   //alternative_sesitivity_multiplier = GM_getValue( 'alternative_sesitivity_multiplier', alternative_sesitivity_multiplier );
  382.   //console.log("Config for smoothscroll loaded!")
  383. }
  384.  
  385. function SaveConfig()
  386. {
  387.   GM_setValue( 'smoothness', document.getElementById('ss-smoothness').value)
  388.   GM_setValue( 'sensitivity', document.getElementById('ss-sensitivity').value)
  389.   GM_setValue( 'acceleration', document.getElementById('ss-acceleration').value)
  390.   GM_setValue( 'refreshrate', document.getElementById('ss-refreshrate').value)
  391.   //console.log(document.getElementById('ss-alternative_sesitivity_multiplier').checked)
  392.   //console.log("Config for smoothscroll saved!")
  393. }
  394.  
  395. function CloseConfig()
  396. {
  397.  	var configbar = document.getElementById("ss-configbar");
  398.   configbar.style.display = 'none';  
  399. }
  400.  
  401. function InitConfigmenu()
  402. {
  403.   	//console.log("Initiating smoothscroll config...");
  404.     var configbar = document.createElement('div');
  405.     configbar.setAttribute("id","ss-configbar");
  406.  	
  407.   	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-refreshrate" min="1" max="100" value="' + refreshrate + '"></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>';
  408.   	
  409.   	
  410.     var configparent = document.getElementsByTagName("body")[0];
  411.   	configbar.style.width = '100%';  
  412.   	configbar.style.display = 'none';  
  413.   	configbar.style.position = 'absolute';
  414. 	configbar.style.zIndex = '9999';
  415.   	configbar.style.backgroundColor = 'white';
  416.   
  417.   	configparent.insertBefore(configbar, configparent.childNodes[0]);
  418.   	
  419.   	document.getElementById("ss-close").onclick = function() {CloseConfig()};
  420.   
  421.   	document.getElementById("ss-save").onclick = function() {SaveConfig()};
  422. }
  423.  
  424. function ConfigSmoothscroll()
  425. {
  426.   if (typeof $smoothscroll$ == 'undefined'){
  427.     alert("Smoothscroll is not running properly on this page!");
  428.     return;
  429.   }
  430.  
  431.   var configbar = document.getElementById("ss-configbar");
  432.   configbar.style.display = 'block';  
  433.   //ss$("html, body").animate({ scrollTop: 0 }, "slow");
  434.   //console.log("opening config...");
  435. }
  436.  
  437. if (typeof $smoothscroll$ == 'undefined'){
  438. 	//console.log("Initiating smoothscroll...");
  439. 	InitSmoothscroll();	
  440. 	GM_registerMenuCommand("Configurate smoothscroll", ConfigSmoothscroll);
  441. }
  442. else
  443. {
  444.   console.log("Smoothscroll already loaded!");
  445. }