☰

Smoothscroll

Smooth scrolling on pages using javascript and jquery

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

  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-load
  8. // @grant    none
  9. // @grant       GM_getValue
  10. // @grant       GM_setValue
  11. // @grant       GM_registerMenuCommand
  12. // @version 2.3
  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.           	if (e.defaultPrevented)
  224.             {
  225.               return true;
  226.             }
  227.           	else
  228.             {
  229.               e.preventDefault();
  230.             }
  231. 			
  232. 		}
  233.    	 positiondelta = scrollpositiondelta(scrollfocus);
  234.    
  235. 	 var direction = rolled/Math.abs(rolled);
  236. 	 
  237. 	 var positiondeltadelta = Math.round(rolled*sensitivity + Math.sqrt(Math.abs(positiondelta-rolled*sensitivity))*acceleration*rolled*0.09/sensitivity);
  238. 	 
  239. 	 positiondelta = positiondelta*1 + positiondeltadelta*1;
  240. 	 
  241.   	 scrollpositiondelta(scrollfocus, positiondelta)
  242.  
  243. 	 clearTimeout(scroll_timeout);
  244. 	 
  245. 	 UpdatePosition(scrollfocus);
  246.    
  247.    		//console.log(e);
  248. 	 
  249. 	 return true;
  250.  }
  251.  
  252.  function canscroll(element, dir)
  253. {
  254.   	if (dir>0)
  255.     {
  256.       dir = 1;
  257.     }
  258.   	if (dir<0)
  259.     {
  260.       dir = -1;
  261.     }
  262.   	var checkradius = 3; //pixels to try scrolling
  263.   
  264.   	var canscroll0 = false;
  265.  
  266. 	var scrollable = element;
  267.  
  268. 	var lastscrolltop = scrollable.scrollTop;
  269.  
  270. 	scrollable.scrollTop = lastscrolltop+dir*checkradius;
  271.  
  272. 	if (scrollable.scrollTop!=lastscrolltop)
  273. 	{
  274. 		canscroll0 = true;
  275. 	}
  276.  
  277. 	scrollable.scrollTop = lastscrolltop;
  278.  
  279. 	return canscroll0;
  280. }
  281.   
  282.   
  283. function scrollpositiondelta(element, newdelta)
  284. {
  285.   	//var target = //ss$(element);
  286. 	var target = element;
  287.   	var delta = 0;
  288.   	if (newdelta!=undefined)
  289.     {
  290.       //console.log(dir);
  291.       var dir = 0;
  292.       if (newdelta>0)
  293.       {
  294.         dir = 1;
  295.       }
  296.       if (newdelta<0)
  297.       {
  298.         dir = -1;
  299.       }
  300. 	  target.setAttribute("positiondelta", newdelta );
  301.  
  302.       delta = newdelta;
  303.     }
  304. 	else
  305.     {
  306. 		var olddelta = target.getAttribute("positiondelta");
  307.       if (olddelta!=undefined)
  308.       {
  309.       	delta = olddelta;
  310.       }
  311.     }
  312.   	return delta*1;
  313. }
  314.  
  315. function UpdateFocus(x,y) {
  316. 	if (scrollfocus)
  317.       {
  318.         //scrollpositiondelta(scrollfocus, 0);
  319.         //ss$(scrollfocus).stop();
  320.       }
  321. 	var dir = y;
  322. 	 	var nodelist = document.querySelectorAll( ":hover" );
  323. 	 	if (WEBKIT)
  324.         {
  325.         	//scrollfocus = //ss$('body');
  326. 			scrollfocus = document.body;
  327.         }
  328.   		else
  329.         {
  330.             //scrollfocus = //ss$('html');
  331. 			scrollfocus = document.documentElement;
  332.         }
  333.   		
  334. 	 	for (var i = nodelist.length-1; i >= 0 ; i--) { 
  335. 			  var newfocus = nodelist[i];
  336. 				if (canscroll(newfocus, dir) && hasscrollbars(newfocus))
  337. 				{
  338. 					scrollfocus = newfocus;
  339. 					return newfocus;
  340. 				}
  341.  		}
  342.  
  343. 	 return scrollfocus;
  344.  }
  345. 	
  346.   /*ss$('html').bind({
  347.     
  348. 	mousemove: function(e) {
  349.       mousemoved = true;
  350.     },
  351.     
  352.     mousedown: function(e) {
  353.       if (DEBUG)
  354.       {
  355.         console.log(scrollfocus);
  356.       }
  357.       if (scrollfocus)
  358.       {
  359.         scrollpositiondelta(scrollfocus, 0);
  360.         ////ss$(scrollfocus).stop();
  361.       }
  362.       scrollfocus = UpdateFocus(0,0);
  363.       //console.log("click");
  364.     }
  365.   });
  366. 	*/
  367. 	
  368.   
  369. document.documentElement.addEventListener("wheel", function(e){
  370.     MouseScroll(e);
  371. 	mousemoved = true;
  372.   //console.log("scrolling");
  373. });
  374.   
  375.  
  376.   //WEBKIT = 'webkitRequestAnimationFrame' in window;
  377.   WEBKIT = document.compatMode == 'CSS1Compat' || document.compatMode == "BackCompat";
  378.   
  379.   //console.log("window: " + window);
  380.   console.log("Smoothscroll loaded! Webkit: " + WEBKIT);
  381.   
  382.   $smoothscroll$ = true;
  383. }
  384.  
  385. function LoadConfig()
  386. {
  387.   smoothness = GM_getValue( 'smoothness', smoothness );
  388.   sensitivity = GM_getValue( 'sensitivity', sensitivity );
  389.   acceleration = GM_getValue( 'acceleration', acceleration );
  390.   refreshrate = GM_getValue( 'refreshrate', refreshrate );
  391.   //alternative_sesitivity_multiplier = GM_getValue( 'alternative_sesitivity_multiplier', alternative_sesitivity_multiplier );
  392.   //console.log("Config for smoothscroll loaded!")
  393. }
  394.  
  395. function SaveConfig()
  396. {
  397.   GM_setValue( 'smoothness', document.getElementById('ss-smoothness').value)
  398.   GM_setValue( 'sensitivity', document.getElementById('ss-sensitivity').value)
  399.   GM_setValue( 'acceleration', document.getElementById('ss-acceleration').value)
  400.   GM_setValue( 'refreshrate', document.getElementById('ss-refreshrate').value)
  401.   //console.log(document.getElementById('ss-alternative_sesitivity_multiplier').checked)
  402.   //console.log("Config for smoothscroll saved!")
  403. }
  404.  
  405. function CloseConfig()
  406. {
  407.  	var configbar = document.getElementById("ss-configbar");
  408.   configbar.style.display = 'none';  
  409. }
  410.  
  411. function InitConfigmenu()
  412. {
  413.   	//console.log("Initiating smoothscroll config...");
  414.     var configbar = document.createElement('div');
  415.     configbar.setAttribute("id","ss-configbar");
  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="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>';
  418.   	
  419.   	
  420.     var configparent = document.getElementsByTagName("body")[0];
  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.   //ss$("html, body").animate({ scrollTop: 0 }, "slow");
  444.   //console.log("opening config...");
  445. }
  446.  
  447. if (typeof $smoothscroll$ == 'undefined'){
  448. 	//console.log("Initiating smoothscroll...");
  449. 	InitSmoothscroll();	
  450. 	GM_registerMenuCommand("Configurate smoothscroll", ConfigSmoothscroll);
  451. }
  452. else
  453. {
  454.   console.log("Smoothscroll already loaded!");
  455. }