☰

Smoothscroll

Smooth scrolling on pages using javascript and jquery

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

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