☰

Smoothscroll

Smooth scrolling on pages using javascript and jquery

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

  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    GM_info
  9. // @grant         unsafeWindow
  10. // @version 0.0.1.20160524014511
  11. // ==/UserScript==
  12.  
  13.  
  14.  
  15.  
  16.  
  17.  
  18. //SETTINGS HERE
  19.  
  20. //Smoothness factor value (how strong the smoothing effect is)
  21. //values: 1-(infinite) (default = 50)
  22. var smoothness = 30;
  23.  
  24.  
  25. //Scroll sensitivity
  26. //values: anything? (default 1.00)
  27. var sensitivity = 1.00;
  28.  
  29.  
  30. //Acceleration sensitivity
  31. //values: anything? (default 1.00)
  32. var acceleration = 1.00;
  33.  
  34.  
  35. //Refreshrate setting
  36. //values: 30-144 (default = 60/72/120/144 = same as your monitor hz)
  37. var baserefreshrate = 72;
  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_sesitivity_multiplier = false;
  43.  
  44.  
  45. var minimal_jquery_version = 200;
  46.  
  47.  
  48.  
  49. var DEBUG = false;
  50.  
  51. //CODE STARTS HERE
  52. if (window.top != window.self)  //don't run on frames or iframes
  53.     return;
  54.  
  55.  
  56.  
  57. if (smoothness>100)
  58. {
  59. 	smoothness = 100;
  60. }
  61.  
  62. if (baserefreshrate <= 30 || baserefreshrate>144)
  63. {
  64. 	baserefreshrate = 144;
  65. }
  66. refreshrate = baserefreshrate;
  67.  
  68. var animationduration = Math.round(1000/refreshrate);
  69. //var relativeratio = Math.round(51-smoothness/2)/100;
  70. var relativeratio = Math.round(1/(1+smoothness)*100)/100;
  71. //var relativeratio = relativeratio;
  72.  
  73.  
  74.  
  75. var lastLoop = new Date;
  76. //var lastrefreshrate = 0;
  77. function gameLoop() { 
  78. 	var thisLoop = new Date;
  79.     var refreshrate0 = 1000 / (thisLoop - lastLoop + 1);
  80.     lastLoop = thisLoop;
  81. 	
  82. 	refreshrate = refreshrate + (refreshrate0-refreshrate)*0.01;
  83. 	refreshrate = Math.round(refreshrate);
  84. 	
  85. 	if (DEBUG)
  86. 	{
  87. 		console.log(refreshrate);
  88. 	}
  89. 	
  90. 	animationduration = Math.round(1000/(refreshrate));
  91. 	//var relativeratio = Math.round(51-smoothness/2)/100;
  92. 	relativeratio = Math.round(1/(1+smoothness*refreshrate/baserefreshrate)*100)/100;
  93. }
  94. gameLoop();
  95.  
  96.  
  97. function InitSmoothscroll()
  98. {
  99.  
  100. var startposition = false;
  101. var targetposition = 0;
  102. var position = 0;
  103.  
  104. var scrollfocus = $0('body');
  105. function hasScrollBarVisible(element)
  106. {
  107.   //return (document.documentElement.scrollHeight !== document.documentElement.clientHeight);
  108.  
  109.   // Get the computed style of the body element
  110.   var cStyle = element.currentStyle||window.getComputedStyle(element, "");
  111.  
  112.   // Check the overflow and overflowY properties for "auto" and "visible" values
  113.   var scrollbar1 = cStyle.overflow == "scroll" || cStyle.overflowY == "scroll";
  114.  
  115. 	var scrollbar2 = cStyle.overflow == "auto" || cStyle.overflowY == "auto";
  116. 	
  117. 	var scrollbar = scrollbar1 || scrollbar2;
  118.  
  119.   return scrollbar;
  120. }
  121.  
  122.  
  123. function hasscrollbars(scrollfocus)
  124. {
  125. 	var hasvisiblescrollbars = hasScrollBarVisible(scrollfocus);
  126. 	var parentelement = $0(scrollfocus).parent();
  127. 	if ( $0(parentelement))
  128. 	{
  129. 		//if ($0(parentelement).is("textarea") || $0(scrollfocus).is("textarea"))
  130. 		if ($0(parentelement).is("textarea") || $0(scrollfocus).is("textarea") || $0(parentelement).is("article") || $0(parentelement).is("article"))
  131. 		{
  132. 			return true;
  133. 		}
  134. 		else
  135. 		{
  136. 			if ($0(parentelement).hasClass( "yt-scrollbar" ) || $0(scrollfocus).hasClass( "yt-scrollbar" ))
  137. 			{
  138. 				return true;
  139. 			}
  140. 			return hasvisiblescrollbars;
  141. 		}
  142. 	}
  143. 	else
  144. 	{
  145. 		//scrollfocus = $0('body');
  146. 		//maxposition = $0(scrollfocus).height();
  147. 		return hasvisiblescrollbars;
  148. 	}
  149. 	return false;
  150. }
  151.  
  152. function UpdatePosition(element)
  153. {
  154. 	gameLoop();
  155. 	
  156. 	var positiondelta = $0(element)[0].getAttribute( "positiondelta" );
  157. 	//var smoothdelta = Math.sqrt(positiondelta*positiondelta*relativeratio);
  158. 	
  159. 	var smoothdelta = Math.sqrt(positiondelta*positiondelta*relativeratio);
  160. 	
  161. 	if (positiondelta<0)
  162. 	{
  163. 		smoothdelta = smoothdelta*(-1);
  164. 	}
  165. 	
  166. 	//var relative = position - $0(element).scrollTop();
  167. 	//console.log("smoothdelta:" + smoothdelta);
  168. 	
  169. 	if (Math.abs( (positiondelta-smoothdelta)) <= 1 )
  170. 	{
  171. 		$0(element).stop();
  172. 		$0(element).animate({
  173. 			scrollTop: '+=' + Math.round(positiondelta)
  174. 		}, animationduration, "linear", function() {
  175. 			$0(element).attr( "positiondelta",0 );
  176. 			$0(element)[0].setAttribute( "positiondelta",0 );
  177. 			if (DEBUG)
  178. 			{
  179. 				$0(element).css( "border", "1px solid red" );
  180. 			}
  181. 		});
  182. 	}
  183. 	else
  184. 	{
  185. 		
  186. 		$0(element).stop();
  187. 		$0(element).animate({
  188. 			scrollTop: '+=' + Math.round(smoothdelta)
  189. 		}, animationduration, "linear", function() {
  190. 			$0(element).attr( "positiondelta",positiondelta-smoothdelta );
  191. 			$0(element)[0].setAttribute("positiondelta",positiondelta-smoothdelta );
  192. 			UpdatePosition(element);
  193. 			if (DEBUG)
  194. 			{
  195. 				$0(element).css( "border", "1px solid red" );
  196. 			}
  197. 		});
  198. 	}
  199. }
  200.  
  201.  
  202.  function MouseScroll (x,y,e) {
  203. 	 scrollfocus = UpdateFocus(x,y);
  204. 	
  205. 	 var positiondelta = 0;
  206. 	 var lastscrolltop = 0;
  207.  
  208. 	 var parentelement = $0(scrollfocus).parent();
  209. 	 if ( $0(parentelement))
  210. 	 {
  211. 		 if ($0(parentelement).is("textarea") || $0(scrollfocus).is("textarea"))
  212. 		 {
  213. 			 //return true;
  214. 		 }
  215. 		 else
  216. 		 {
  217. 			 if ( $0(parentelement).height() < $0(scrollfocus).height())
  218. 			 {
  219. 				 //maxposition = $0(scrollfocus).height() - $0(parentelement).height();
  220. 			 }
  221. 			 else
  222. 			 {
  223. 				 if ($0(scrollfocus).height()==0)
  224. 				 {
  225. 					 //scrollfocus = $0('body');
  226. 					 //maxposition = $0(scrollfocus).height();
  227. 				 }
  228.  
  229. 				 //scrollfocus = $0('body');
  230. 				 //return MouseScroll (event);
  231. 				 //return true;
  232. 			 }
  233. 		 }
  234. 	 }
  235. 	 else
  236. 	 {
  237. 		 scrollfocus = $0('body');
  238. 		 //maxposition = $0(scrollfocus).height();
  239. 	 }
  240. 	 
  241. 	 var rolled = y;
  242. 	 
  243. 	 //console.log("rolled: " + rolled);
  244. 	
  245. 	 //if ($0(scrollfocus).data("positiondelta" )==undefined)
  246. 	 //$embellishment.data("embellishmentid",1)
  247. 	 if ($0(scrollfocus)[0].getAttribute("positiondelta")==undefined)
  248. 		 
  249. 		 {
  250. 			 positiondelta = 0;
  251. 			 //console.log("positiondelta: undefined");
  252. 		 }
  253. 	 else
  254. 		 {
  255. 			 positiondelta = $0(scrollfocus)[0].getAttribute("positiondelta");
  256. 			 //console.log("positiondelta: " + positiondelta);
  257. 		 }
  258. 	 positiondelta = positiondelta*1;
  259. 	 
  260. 	 	var lastscrolltop = $0(scrollfocus).scrollTop();
  261. 	 	$0(scrollfocus).scrollTop(lastscrolltop+rolled);
  262. 	 	if ($0(scrollfocus).scrollTop()==lastscrolltop)
  263. 		{
  264. 			if (!$0(scrollfocus).is("body"))
  265. 			{
  266. 				focus = parentelement;
  267. 				//focus = UpdateFocus(event);
  268. 				//return MouseScroll (event);
  269. 				//console.log("false");
  270. 				return false;
  271. 			}
  272. 			else
  273. 			{
  274. 				//console.log("true");
  275. 				return false;
  276. 			}
  277. 		}
  278. 	 	else
  279. 		{
  280. 			e.preventDefault();
  281. 		}
  282. 	    $0(scrollfocus).scrollTop(lastscrolltop);
  283. 	 
  284. 	 var direction = rolled/Math.abs(rolled);
  285. 	 //var positiondeltadelta = rolled*sensitivity + Math.sqrt(Math.abs(positiondelta/rolled))*acceleration*rolled;
  286. 	 
  287. 	 //var positiondeltadelta = rolled*(sensitivity+Math.sqrt(Math.abs(positiondelta))*acceleration);
  288. 	 //
  289. 	 var positiondeltadelta = Math.round(rolled*sensitivity + Math.sqrt(Math.abs(positiondelta-rolled*sensitivity))*acceleration*rolled*0.03/sensitivity);
  290. 	 
  291. 	 positiondelta = positiondelta + positiondeltadelta;
  292. 	
  293. 	 $0(scrollfocus)[0].setAttribute("positiondelta",positiondelta );
  294. 	 
  295. 	 
  296. 	 UpdatePosition($0(scrollfocus));
  297. 	 
  298. 	 //element.innerHTML = "";
  299. 	 //console.log("pos:" + position);
  300. 	 //event.preventDefault();
  301. 	 return true;
  302.  }
  303.  
  304.  function canscroll(element, dir)
  305. {
  306. 	var scrollable = $0(element);
  307. 	var lastscrolltop = $0(scrollable).scrollTop();
  308. 	$0(scrollable).scrollTop(lastscrolltop+dir);
  309. 	if ($0(scrollable).scrollTop()==lastscrolltop)
  310. 	{
  311. 		$0(scrollable).scrollTop(lastscrolltop);
  312. 		return false;
  313. 	}
  314. 	else
  315. 	{
  316. 		$0(scrollable).scrollTop(lastscrolltop);
  317. 		return true;
  318. 	}
  319. 	
  320. }
  321. function UpdateFocus(x,y) {
  322. 	 /*var dir = 0;
  323. 	 if ('wheelDelta' in event) {
  324. 		 dir = event.wheelDelta;
  325. 	 }
  326. 	 else {  // Firefox
  327. 		 // The measurement units of the detail and wheelDelta properties are different.
  328. 		 dir = event.detail*(-120);
  329. 	 }*/
  330. 	var dir = y;
  331. 	//console.log(dir);
  332. 	 //dir = dir*(-1);
  333. 	 //
  334. 	 	var nodelist = document.querySelectorAll( ":hover" );
  335. 		$0(nodelist).stop();
  336. 	 	scrollfocus = $0('body');
  337. 	 	for (var i = nodelist.length-1; i >= 0; i--) { 
  338. 				//var parent = nodelist[i-1];
  339. 			  var newfocus = nodelist[i];
  340. 				if (DEBUG)
  341. 				{
  342. 					$0(newfocus).css( "border", "1px solid blue" );
  343. 					//var debugtimer = setTimeout(function(){ $0(newfocus).css( "border", "0px solid white" ); }, 1000);
  344. 				}
  345. 				//if ($0(newfocus).hasScrollBar3() && hasScrollBarVisible(newfocus) && canscroll(newfocus, dir) && hasscrollbars(newfocus))
  346. 				if (canscroll(newfocus, dir) && hasscrollbars(newfocus))
  347. 				{
  348. 					scrollfocus = $0(newfocus);
  349. 					return newfocus;
  350. 				}
  351.  		}
  352.  
  353. 	 return scrollfocus;
  354.  }
  355. 	
  356. 		$0('body').bind({
  357. 			/*
  358. 			 mousewheel: function(e) {
  359. 			if (DEBUG)
  360. 			{
  361. 				console.log(scrollfocus);
  362. 			}
  363. 			  console.log("scrolling");
  364. 			  MouseScroll(e.originalEvent);
  365. 		  },
  366. 		  */
  367. 			
  368. 		  mousedown: function(e) {
  369. 			 if (DEBUG)
  370. 			{
  371. 				console.log(scrollfocus);
  372. 			}
  373. 			  if (scrollfocus)
  374. 			{
  375. 			  $0(scrollfocus)[0].setAttribute( "positiondelta",0 );
  376. 			  $0(scrollfocus).stop();
  377. 			}
  378. 				//scrollfocus = UpdateFocus(e.originalEvent);
  379. 			  //console.log("click");
  380. 		  }
  381. 		});
  382. //Init(window);
  383.  
  384. (function(window,document) {
  385.  
  386.     var prefix = "", _addEventListener, onwheel, support;
  387.  
  388.     // detect event model
  389.     if ( window.addEventListener ) {
  390.         _addEventListener = "addEventListener";
  391.     } else {
  392.         _addEventListener = "attachEvent";
  393.         prefix = "on";
  394.     }
  395.  
  396.     // detect available wheel event
  397.     support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers support "wheel"
  398.               document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
  399.               "DOMMouseScroll"; // let's assume that remaining browsers are older Firefox
  400.  
  401.     window.addWheelListener = function( elem, callback, useCapture ) {
  402.         _addWheelListener( elem, support, callback, useCapture );
  403.  
  404.         // handle MozMousePixelScroll in older Firefox
  405.         if( support == "DOMMouseScroll" ) {
  406.             _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
  407.         }
  408.     };
  409.  
  410.     function _addWheelListener( elem, eventName, callback, useCapture ) {
  411.         elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
  412.             !originalEvent && ( originalEvent = window.event );
  413.  
  414.             // create a normalized event object
  415.             var event = {
  416.                 // keep a ref to the original event object
  417.                 originalEvent: originalEvent,
  418.                 target: originalEvent.target || originalEvent.srcElement,
  419.                 type: "wheel",
  420.                 deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
  421.                 deltaX: 0,
  422.                 deltaZ: 0,
  423.                 preventDefault: function() {
  424.                     originalEvent.preventDefault ?
  425.                         originalEvent.preventDefault() :
  426.                         originalEvent.returnValue = false;
  427.                 }
  428.             };
  429.             
  430.             // calculate deltaY (and deltaX) according to the event
  431.             if ( support == "mousewheel" ) {
  432.                 event.deltaY = - 1/40 * originalEvent.wheelDelta;
  433.                 // Webkit also support wheelDeltaX
  434.                 originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
  435.             } else {
  436.                 event.deltaY = originalEvent.detail;
  437.             }
  438.  
  439.             // it's time to fire the callback
  440.             return callback( event );
  441.  
  442.         }, useCapture || false );
  443.     }
  444.  
  445. })(window,document);
  446. 	
  447. addWheelListener( window, function( e ) { 
  448. 	var mul = 1;
  449. 	if (alternative_sesitivity_multiplier)
  450. 		mul = 40;
  451. 	//console.log( e.deltaY ); 
  452. 	MouseScroll(e.deltaX*mul,e.deltaY*mul, e);
  453. });	
  454.  
  455. 	
  456. console.log("Smoothscroll initiated!");
  457. }
  458.  
  459.  
  460. var JQUERY = false;
  461. var OWNJQUERY = false;
  462. var OLDJQUERY = false;
  463.  
  464. //max retries
  465. var r_max = 10;
  466. var r_count = 0;
  467.  
  468. function Init() {
  469.   //if (typeof jQuery == 'function')  {  
  470.   //if (typeof jQuery == 'undefined' || typeof $ == 'undefined' ) 
  471.   JQUERY = true;
  472.   if (typeof $ == 'undefined' ) 
  473.   {
  474.     JQUERY = false;
  475.   }
  476.   OWNJQUERY = true;
  477.   if (typeof $0 == 'undefined' ) 
  478.   {
  479.     OWNJQUERY = false;
  480.   }
  481.   if (!OWNJQUERY){
  482.     if (JQUERY) {
  483.       var versiontable = $.fn.jquery.split('.');
  484.       var version = 0;
  485.       for (var i = versiontable.length-1; i >= 0; i--) { 
  486.         var power = versiontable.length-i;
  487.         version += Math.pow(10,power-1)*versiontable[i];
  488.       }
  489.  
  490.       if (version<=minimal_jquery_version)
  491.       {
  492.         console.log("Page jQuery OLD! Version: " + version);
  493.         if (typeof old$ == 'undefined') {
  494.           console.log("Saving old jQuery...");  
  495.           old$ = $;
  496.           oldjQuery = jQuery;
  497.           
  498.           OLDJQUERY = true;
  499.         }
  500.       }
  501.       else
  502.       {
  503.         $0 = $;
  504.         OWNJQUERY = true;
  505.       }
  506.     }
  507.     else
  508.     {
  509.       console.log("Page jQuery Missing!");
  510.     }
  511.   }
  512.   if (!OWNJQUERY)
  513.   {
  514.     console.log("Loading new jQuery...");  
  515.  
  516.     //this.$ = this.jQuery = jQuery.noConflict(true);
  517.     //var $ = jQuery.noConflict();
  518.  
  519.     //this.$ = this.jQuery = jQuery.noConflict(true);
  520.  
  521.  
  522.     var filename = "https://code.jquery.com/jquery-2.2.3.js";
  523.     var fileref = document.createElement('script');
  524.     fileref.setAttribute("type","text/javascript");
  525.     fileref.setAttribute("src", filename);
  526.  
  527.     if (typeof fileref!="undefined")
  528.     {
  529.       var scriptparent = document.getElementsByTagName("head")[0];
  530.  
  531.       if (typeof scriptparent=="undefined")
  532.       {
  533.         var scriptparent = document.createElement('head');
  534.         document.getElementsByTagName("html")[0].appendChild(scriptparent);
  535.       }
  536.       scriptparent.appendChild(fileref);
  537.     }
  538.  
  539.     if (r_count<r_max)
  540.     {
  541.       setTimeout(Init, 100);
  542.       return 0;
  543.     }
  544.     else
  545.     {
  546.       console.log("Failed to load smoothscroll!");
  547.     }
  548.     r_count++;
  549.   }
  550.   if (OWNJQUERY) {
  551.     var versiontable = $0.fn.jquery.split('.');
  552.     var version = 0;
  553.     for (var i = versiontable.length-1; i >= 0; i--) { 
  554.       var power = versiontable.length-i;
  555.       version += Math.pow(10,power-1)*versiontable[i];
  556.     }
  557.  
  558.     console.log("Script jQuery OK! Version: " + version);
  559.     InitSmoothscroll();	
  560.   }
  561.   if (OLDJQUERY) {
  562.     console.log("Restoring old jQuery...");  
  563.     $ = old$;
  564.     jQuery = oldjQuery;
  565.     var versiontable = $.fn.jquery.split('.');
  566.     var version = 0;
  567.     for (var i = versiontable.length-1; i >= 0; i--) { 
  568.       var power = versiontable.length-i;
  569.       version += Math.pow(10,power-1)*versiontable[i];
  570.     }
  571.  
  572.     console.log("Page jQuery OK! Version: " + version);
  573.   }
  574.   console.log("Finished loading smoothscroll!");
  575. }
  576.  
  577. console.log("Loading smoothscroll...");
  578. Init();