☰

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