Smoothscroll

Smooth scrolling on pages using javascript and jquery

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