☰

Smoothscroll

Smooth scrolling on pages using javascript and jquery

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

  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-idle
  8. // @grant    GM_info
  9. // @grant         unsafeWindow
  10. // @version 0.0.1.20160520212705
  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 = $('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 = $(scrollfocus).parent();
  127. 	if ( $(parentelement))
  128. 	{
  129. 		//if ($(parentelement).is("textarea") || $(scrollfocus).is("textarea"))
  130. 		if ($(parentelement).is("textarea") || $(scrollfocus).is("textarea") || $(parentelement).is("article") || $(parentelement).is("article"))
  131. 		{
  132. 			return true;
  133. 		}
  134. 		else
  135. 		{
  136. 			if ($(parentelement).hasClass( "yt-scrollbar" ) || $(scrollfocus).hasClass( "yt-scrollbar" ))
  137. 			{
  138. 				return true;
  139. 			}
  140. 			return hasvisiblescrollbars;
  141. 		}
  142. 	}
  143. 	else
  144. 	{
  145. 		//scrollfocus = $('body');
  146. 		//maxposition = $(scrollfocus).height();
  147. 		return hasvisiblescrollbars;
  148. 	}
  149. 	return false;
  150. }
  151.  
  152. function UpdatePosition(element)
  153. {
  154. 	gameLoop();
  155. 	
  156. 	var positiondelta = $(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 - $(element).scrollTop();
  167. 	//console.log("smoothdelta:" + smoothdelta);
  168. 	
  169. 	if (Math.abs( (positiondelta-smoothdelta)) <= 1 )
  170. 	{
  171. 		$(element).stop();
  172. 		$(element).animate({
  173. 			scrollTop: '+=' + Math.round(positiondelta)
  174. 		}, animationduration, "linear", function() {
  175. 			$(element).attr( "positiondelta",0 );
  176. 			$(element)[0].setAttribute( "positiondelta",0 );
  177. 			if (DEBUG)
  178. 			{
  179. 				$(element).css( "border", "1px solid red" );
  180. 			}
  181. 		});
  182. 	}
  183. 	else
  184. 	{
  185. 		
  186. 		$(element).stop();
  187. 		$(element).animate({
  188. 			scrollTop: '+=' + Math.round(smoothdelta)
  189. 		}, animationduration, "linear", function() {
  190. 			$(element).attr( "positiondelta",positiondelta-smoothdelta );
  191. 			$(element)[0].setAttribute("positiondelta",positiondelta-smoothdelta );
  192. 			UpdatePosition(element);
  193. 			if (DEBUG)
  194. 			{
  195. 				$(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 = $(scrollfocus).parent();
  209. 	 if ( $(parentelement))
  210. 	 {
  211. 		 if ($(parentelement).is("textarea") || $(scrollfocus).is("textarea"))
  212. 		 {
  213. 			 //return true;
  214. 		 }
  215. 		 else
  216. 		 {
  217. 			 if ( $(parentelement).height() < $(scrollfocus).height())
  218. 			 {
  219. 				 //maxposition = $(scrollfocus).height() - $(parentelement).height();
  220. 			 }
  221. 			 else
  222. 			 {
  223. 				 if ($(scrollfocus).height()==0)
  224. 				 {
  225. 					 //scrollfocus = $('body');
  226. 					 //maxposition = $(scrollfocus).height();
  227. 				 }
  228.  
  229. 				 //scrollfocus = $('body');
  230. 				 //return MouseScroll (event);
  231. 				 //return true;
  232. 			 }
  233. 		 }
  234. 	 }
  235. 	 else
  236. 	 {
  237. 		 scrollfocus = $('body');
  238. 		 //maxposition = $(scrollfocus).height();
  239. 	 }
  240. 	 
  241. 	 var rolled = y;
  242. 	 
  243. 	 //console.log("rolled: " + rolled);
  244. 	
  245. 	 //if ($(scrollfocus).data("positiondelta" )==undefined)
  246. 	 //$embellishment.data("embellishmentid",1)
  247. 	 if ($(scrollfocus)[0].getAttribute("positiondelta")==undefined)
  248. 		 
  249. 		 {
  250. 			 positiondelta = 0;
  251. 			 //console.log("positiondelta: undefined");
  252. 		 }
  253. 	 else
  254. 		 {
  255. 			 positiondelta = $(scrollfocus)[0].getAttribute("positiondelta");
  256. 			 //console.log("positiondelta: " + positiondelta);
  257. 		 }
  258. 	 positiondelta = positiondelta*1;
  259. 	 
  260. 	 	var lastscrolltop = $(scrollfocus).scrollTop();
  261. 	 	$(scrollfocus).scrollTop(lastscrolltop+rolled);
  262. 	 	if ($(scrollfocus).scrollTop()==lastscrolltop)
  263. 		{
  264. 			if (!$(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. 	    $(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. 	 $(scrollfocus)[0].setAttribute("positiondelta",positiondelta );
  294. 	 
  295. 	 
  296. 	 UpdatePosition($(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 = $(element);
  307. 	var lastscrolltop = $(scrollable).scrollTop();
  308. 	$(scrollable).scrollTop(lastscrolltop+dir);
  309. 	if ($(scrollable).scrollTop()==lastscrolltop)
  310. 	{
  311. 		$(scrollable).scrollTop(lastscrolltop);
  312. 		return false;
  313. 	}
  314. 	else
  315. 	{
  316. 		$(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. 		$(nodelist).stop();
  336. 	 	scrollfocus = $('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. 					$(newfocus).css( "border", "1px solid blue" );
  343. 					//var debugtimer = setTimeout(function(){ $(newfocus).css( "border", "0px solid white" ); }, 1000);
  344. 				}
  345. 				//if ($(newfocus).hasScrollBar3() && hasScrollBarVisible(newfocus) && canscroll(newfocus, dir) && hasscrollbars(newfocus))
  346. 				if (canscroll(newfocus, dir) && hasscrollbars(newfocus))
  347. 				{
  348. 					scrollfocus = $(newfocus);
  349. 					return newfocus;
  350. 				}
  351.  		}
  352.  
  353. 	 return scrollfocus;
  354.  }
  355. 	
  356. 		$('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. 			  $(scrollfocus)[0].setAttribute( "positiondelta",0 );
  376. 			  $(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 loaded!");
  457. }
  458.  
  459.  
  460. var JQUERY = true;
  461.  
  462. //max retries
  463. var r_max = 3;
  464. var r_count = 0;
  465.  
  466. function Init() {
  467. 	//if (typeof jQuery == 'function')  {  
  468. 	if (typeof jQuery == 'undefined' || typeof $ == 'undefined' ) 
  469. 	{
  470. 		JQUERY = false;
  471. 	}
  472. 	if (JQUERY) {
  473. 		//console.log("Using existing jQuery..."); 
  474. 		//this.$ = this.jQuery = jQuery.noConflict(true);
  475. 		//var $ = jQuery.noConflict();
  476. 		//
  477. 		var versiontable = $.fn.jquery.split('.');
  478. 		var version = 0;
  479. 		for (var i = versiontable.length-1; i >= 0; i--) { 
  480. 				var power = versiontable.length-i;
  481. 				version += Math.pow(10,power-1)*versiontable[i];
  482. 		}
  483. 		
  484. 		if (version<=minimal_jquery_version)
  485. 		{
  486. 			JQUERY = false;
  487. 			console.log("jQuery OLD! Version: " + version);
  488. 		}
  489. 		else
  490. 		{
  491. 			console.log("jQuery OK! Version: " + version);
  492. 			InitSmoothscroll();	
  493. 		}
  494. 	}
  495. 	if (!JQUERY) 
  496. 	{
  497. 		console.log("Loading jQuery...");  
  498. 		//this.$ = this.jQuery = jQuery.noConflict(true);
  499. 		//var $ = jQuery.noConflict();
  500.  
  501. 		//this.$ = this.jQuery = jQuery.noConflict(true);
  502.  
  503. 		var filename = "https://code.jquery.com/jquery-2.2.3.js";
  504. 		var fileref=document.createElement('script')
  505. 			fileref.setAttribute("type","text/javascript")
  506. 			fileref.setAttribute("src", filename)
  507.  
  508. 		if (typeof fileref!="undefined")
  509. 		{
  510. 			var scriptparent = document.getElementsByTagName("head")[0];
  511. 			
  512. 			if (typeof scriptparent=="undefined")
  513. 			{
  514. 				var scriptparent = document.createElement('head')
  515. 				document.getElementsByTagName("html")[0].appendChild(scriptparent);
  516. 			}
  517. 			scriptparent.appendChild(fileref);
  518. 		}
  519.         
  520. 		
  521. 		JQUERY = true;
  522. 		
  523. 		if (r_count<r_max)
  524. 		{
  525. 			setTimeout(Init, 1000);
  526. 		}
  527. 		else
  528. 		{
  529. 			console.log("Failed to load smoothscroll!");
  530. 		}
  531. 		r_count++;
  532. 	}
  533.  
  534. }
  535. console.log("Loading smoothscroll...");
  536. Init();