☰

Smoothscroll

Smooth scrolling on pages using javascript and jquery

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

  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.4.1
  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) (default 1.00)
  24. var smoothness = 1;
  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>10)
  54. {
  55. 	smoothness = 10;
  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( ( Math.pow(0.01,smoothness)*refreshrate/baserefreshrate )*1000000)/1000000;
  136. 	
  137. 	var positiondelta = scrollpositiondelta(element);
  138. 	  
  139. 	var smoothdelta = Math.sqrt(positiondelta*positiondelta*relativeratio)/interpolation;
  140.   	var rounddelta = Math.ceil(smoothdelta);
  141.   	
  142. 	//var smoothdelta = positiondelta*relativeratio;
  143.   
  144. 	if (positiondelta<0)
  145. 	{
  146. 		smoothdelta = smoothdelta*(-1);
  147.       	rounddelta = rounddelta*(-1);
  148. 	}
  149.  
  150. 	if (Math.abs( rounddelta ) > 1 )
  151. 	{
  152. 		  scroll_timeout = setTimeout(function() {
  153. 			element.scrollTop = element.scrollTop + rounddelta;
  154. 			scrollpositiondelta(element, positiondelta - rounddelta);
  155. 			UpdatePosition(element);
  156. 		  }, animationduration);
  157. 	}
  158.   	else
  159. 	{	
  160. 	
  161.       if (Math.abs( positiondelta ) > 1 )
  162.       {
  163.       	
  164.       	scroll_timeout = setTimeout(function() {
  165. 			element.scrollTop = element.scrollTop + rounddelta;
  166. 			scrollpositiondelta(element, positiondelta - rounddelta);
  167. 			UpdatePosition(element);
  168. 		  }, Math.abs(animationduration/smoothdelta) );
  169.       
  170.       }
  171.       else
  172.       {
  173.           scroll_timeout = setTimeout(function() {
  174.               element.scrollTop = element.scrollTop + rounddelta;
  175.               scrollpositiondelta(element, 0);
  176.             }, Math.abs(animationduration/smoothdelta));
  177.  
  178.       }
  179. 	}
  180. }
  181.  
  182.  
  183.  function MouseScroll (e) {
  184.  
  185.    	var mul = 1;
  186. 	if (!WEBKIT || alternative_sensitivity_multiplier)
  187. 		mul = 40;
  188.    	var x = e.deltaX*mul;
  189.    	var y = e.deltaY*mul;
  190.    
  191.    	//if (mousemoved)
  192.     //{
  193.       scrollfocus = UpdateFocus(x,y);
  194.       //mousemoved = false;
  195.     //}
  196.    
  197. 	 var positiondelta = 0;
  198. 	 var lastscrolltop = 0;
  199.  
  200. 	 var rolled = y;
  201. 	 	
  202. 	 	if (!canscroll(scrollfocus, rolled))
  203. 		{
  204. 			if (scrollfocus != document.documentElement)	
  205. 			{
  206. 				scrollfocus = UpdateFocus(x,y);
  207.               return false;
  208. 			}
  209. 			else
  210. 			{
  211.               	
  212.               	//console.log("true");
  213. 				return false;
  214. 			}
  215. 		}
  216. 	 	else
  217. 		{
  218.           	if (e.defaultPrevented)
  219.             {
  220.               return true;
  221.             }
  222.           	else
  223.             {
  224.               e.preventDefault();
  225.             }
  226. 			
  227. 		}
  228.    	 positiondelta = scrollpositiondelta(scrollfocus);
  229.    
  230. 	 var direction = rolled/Math.abs(rolled);
  231. 	 
  232. 	 var positiondeltadelta = Math.round(rolled*sensitivity + Math.sqrt(Math.abs(positiondelta-rolled*sensitivity))*acceleration*rolled*0.2);
  233. 	 
  234. 	 positiondelta = positiondelta*1 + positiondeltadelta*1;
  235. 	 
  236.   	 scrollpositiondelta(scrollfocus, positiondelta)
  237.  
  238. 	 clearTimeout(scroll_timeout);
  239. 	 
  240. 	 UpdatePosition(scrollfocus);
  241.    
  242.    		//console.log(e);
  243. 	 
  244. 	 return true;
  245.  }
  246.  
  247.  function canscroll(element, dir)
  248. {
  249.   	if (dir>0)
  250.     {
  251.       dir = 1;
  252.     }
  253.   	if (dir<0)
  254.     {
  255.       dir = -1;
  256.     }
  257.   	var checkradius = 3; //pixels to try scrolling
  258.   
  259.   	var canscroll0 = false;
  260.  
  261. 	var scrollable = element;
  262.  
  263. 	var lastscrolltop = scrollable.scrollTop;
  264.  
  265. 	scrollable.scrollTop = lastscrolltop+dir*checkradius;
  266.  
  267. 	if (scrollable.scrollTop!=lastscrolltop)
  268. 	{
  269. 		canscroll0 = true;
  270. 	}
  271.  
  272. 	scrollable.scrollTop = lastscrolltop;
  273.  
  274. 	return canscroll0;
  275. }
  276.   
  277.   
  278. function scrollpositiondelta(element, newdelta)
  279. {
  280.   	//var target = //ss$(element);
  281. 	var target = element;
  282.   	var delta = 0;
  283.   	if (newdelta!=undefined)
  284.     {
  285.       //console.log(dir);
  286.       var dir = 0;
  287.       if (newdelta>0)
  288.       {
  289.         dir = 1;
  290.       }
  291.       if (newdelta<0)
  292.       {
  293.         dir = -1;
  294.       }
  295. 	  target.setAttribute("positiondelta", newdelta );
  296.  
  297.       delta = newdelta;
  298.     }
  299. 	else
  300.     {
  301. 		var olddelta = target.getAttribute("positiondelta");
  302.       if (olddelta!=undefined)
  303.       {
  304.       	delta = olddelta;
  305.       }
  306.     }
  307.   	return delta*1;
  308. }
  309.  
  310. function UpdateFocus(x,y) {
  311. 	if (scrollfocus)
  312.       {
  313.         //scrollpositiondelta(scrollfocus, 0);
  314.         //ss$(scrollfocus).stop();
  315.       }
  316. 	var dir = y;
  317. 	 	var nodelist = document.querySelectorAll( ":hover" );
  318. 	 	if (WEBKIT)
  319.         {
  320.         	//scrollfocus = //ss$('body');
  321. 			scrollfocus = document.body;
  322.         }
  323.   		else
  324.         {
  325.             //scrollfocus = //ss$('html');
  326. 			scrollfocus = document.documentElement;
  327.         }
  328.   		
  329. 	 	for (var i = nodelist.length-1; i >= 0 ; i--) { 
  330. 			  var newfocus = nodelist[i];
  331. 				if (canscroll(newfocus, dir) && hasscrollbars(newfocus))
  332. 				{
  333. 					scrollfocus = newfocus;
  334. 					return newfocus;
  335. 				}
  336.  		}
  337.  
  338. 	 return scrollfocus;
  339.  }
  340. 	
  341.   /*ss$('html').bind({
  342.     
  343. 	mousemove: function(e) {
  344.       mousemoved = true;
  345.     },
  346.     
  347.     mousedown: function(e) {
  348.       if (DEBUG)
  349.       {
  350.         console.log(scrollfocus);
  351.       }
  352.       if (scrollfocus)
  353.       {
  354.         scrollpositiondelta(scrollfocus, 0);
  355.         ////ss$(scrollfocus).stop();
  356.       }
  357.       scrollfocus = UpdateFocus(0,0);
  358.       //console.log("click");
  359.     }
  360.   });
  361. 	*/
  362. 	
  363.   
  364. document.documentElement.addEventListener("wheel", function(e){
  365.     MouseScroll(e);
  366. 	mousemoved = true;
  367.   //console.log("scrolling");
  368. });
  369.   
  370.  
  371.   //WEBKIT = 'webkitRequestAnimationFrame' in window;
  372.   WEBKIT = document.compatMode == 'CSS1Compat' || document.compatMode == "BackCompat";
  373.   
  374.   //console.log("window: " + window);
  375.   console.log("Smoothscroll loaded! Webkit: " + WEBKIT);
  376.   
  377.   $smoothscroll$ = true;
  378. }
  379.  
  380. function LoadConfig()
  381. {
  382.   smoothness = GM_getValue( 'smoothness', smoothness );
  383.   sensitivity = GM_getValue( 'sensitivity', sensitivity );
  384.   acceleration = GM_getValue( 'acceleration', acceleration );
  385.   refreshrate = GM_getValue( 'refreshrate', refreshrate );
  386.   //alternative_sesitivity_multiplier = GM_getValue( 'alternative_sesitivity_multiplier', alternative_sesitivity_multiplier );
  387.   //console.log("Config for smoothscroll loaded!")
  388. }
  389.  
  390. function SaveConfig()
  391. {
  392.   GM_setValue( 'smoothness', document.getElementById('ss-smoothness').value)
  393.   GM_setValue( 'sensitivity', document.getElementById('ss-sensitivity').value)
  394.   GM_setValue( 'acceleration', document.getElementById('ss-acceleration').value)
  395.   GM_setValue( 'refreshrate', document.getElementById('ss-refreshrate').value)
  396.   //console.log(document.getElementById('ss-alternative_sesitivity_multiplier').checked)
  397.   console.log("Config for smoothscroll saved!")
  398. }
  399.  
  400. function CloseConfig()
  401. {
  402.  	var configbar = document.getElementById("ss-configbar");
  403.   configbar.style.display = 'none';  
  404. }
  405.  
  406. function InitConfigmenu()
  407. {
  408.   	//console.log("Initiating smoothscroll config...");
  409.     var configbar = document.createElement('div');
  410.     configbar.setAttribute("id","ss-configbar");
  411.   
  412.   //<tr><td>Sensitivity</td><td><input type="number" id="ss-sensitivity" min="0" max="100" value="' + sensitivity + '"></td><td> Scroll sensitivity (duh)</td></tr>
  413.  	
  414.   	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>';
  415.   	
  416.   	
  417.     var configparent = document.getElementsByTagName("body")[0];
  418.   	configbar.style.width = '100%';  
  419.   	configbar.style.display = 'none';  
  420.   	configbar.style.position = 'absolute';
  421. 	configbar.style.zIndex = '9999';
  422.   	configbar.style.backgroundColor = 'white';
  423.   
  424.   	configparent.insertBefore(configbar, configparent.childNodes[0]);
  425.   	
  426.   	document.getElementById("ss-close").onclick = function() {CloseConfig()};
  427.   
  428.   	document.getElementById("ss-save").onclick = function() {SaveConfig()};
  429. }
  430.  
  431. function ConfigSmoothscroll()
  432. {
  433.   if (typeof $smoothscroll$ == 'undefined'){
  434.     alert("Smoothscroll is not running properly on this page!");
  435.     return;
  436.   }
  437.  
  438.   var configbar = document.getElementById("ss-configbar");
  439.   configbar.style.display = 'block';  
  440.   //ss$("html, body").animate({ scrollTop: 0 }, "slow");
  441.   //console.log("opening config...");
  442. }
  443.  
  444. if (typeof $smoothscroll$ == 'undefined'){
  445. 	//console.log("Initiating smoothscroll...");
  446. 	InitSmoothscroll();	
  447. 	GM_registerMenuCommand("Configurate smoothscroll", ConfigSmoothscroll);
  448. }
  449. else
  450. {
  451.   console.log("Smoothscroll already loaded!");
  452. }