☰

Vim键位导航

使用j/k对应上下滚动; d/u对应上下翻页; gg/G对应到页首页尾

目前为 2022-12-17 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Vim-like Navigation
  3. // @name:zh-CN   Vim键位导航
  4. // @namespace    http://tampermonkey.net/
  5. // @version      1.1
  6. // @description  Use (h,j,k,l) to scroll around.  gg to go to top G to to bottom
  7. // @description:zh-cn  使用j/k对应上下滚动; d/u对应上下翻页; gg/G对应到页首页尾
  8. // @author       Max Schulte
  9. // @license      MIT
  10. // @match        http*://*
  11. // @match		 *://*/*
  12. // @match		 *
  13. // @grant        none
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18. 	// Your code here...
  19. 	var keyLog = []
  20.  
  21. 	document.onkeypress = function (e) {
  22. 		// if user is typing inside of a text box return
  23.         var nodeName = e.target.nodeName
  24. 		if ( nodeName == 'INPUT' || nodeName == 'TEXTAREA' ) return;
  25. 		// event
  26. 		e = e || window.event;
  27. 		// horizontal and vertical
  28. 		var h = 0;
  29. 		var v = 0;
  30. 		// scroll amount
  31. 		keyLog.push(e.keyCode)
  32. // 		console.log(keyLog)
  33. 		var sa = 100;
  34. 		switch (e.keyCode){
  35. 			case 104:	// h
  36. 				h -= sa;
  37. 				keyLog = [];
  38. 				break;
  39. 			case 106:	// j
  40. 				v += sa;
  41. 				keyLog = [];
  42. 				break;
  43. 			case 107:	// k
  44. 				v -= sa;
  45. 				keyLog = [];
  46. 				break;
  47. 			case 108:	// l
  48. 				h += sa;
  49. 				keyLog = [];
  50. 				break;
  51.             case 100: // d
  52. 				v = v + sa + 300;
  53. 				keyLog = [];
  54. 				break;
  55.             case 117: // u
  56. 				v = v - sa - 300;
  57. 				keyLog = [];
  58. 				break;
  59.             case 120: // x
  60.                 closeTab()
  61.                 window.close()
  62. 				break;
  63. 			case 103: // gg
  64. 				if (keyLog[keyLog.length-2] != 103) {
  65. 					break;
  66. 				}
  67. 				keyLog = [];
  68.                 scrollSmoothTo(0);
  69. 				return;
  70. 			case 71:	// G
  71.                 scrollSmoothTo(document.documentElement.scrollHeight)
  72. 				keyLog = [];
  73. 				return;
  74. 			default:
  75. 				keyLog = [];
  76. 				break;
  77. 		}
  78. // 		window.scrollBy(h, v);
  79.         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  80.         scrollSmoothTo(v + scrollTop)
  81. 	};
  82. })();
  83.  
  84. var scrollSmoothTo = function (position) {
  85.     if (!window.requestAnimationFrame) {
  86.         window.requestAnimationFrame = function(callback, element) {
  87.             return setTimeout(callback, 17);
  88.         };
  89.     }
  90.     // 当前滚动高度
  91.     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  92.     // 滚动step方法
  93.     var step = function () {
  94.         // 距离目标滚动距离
  95.         var distance = position - scrollTop;
  96.         // 目标滚动位置
  97.         scrollTop = scrollTop + distance / 5;
  98.         if (Math.abs(distance) < 1) {
  99.             window.scrollTo(0, position);
  100.         } else {
  101.             window.scrollTo(0, scrollTop);
  102.             requestAnimationFrame(step);
  103.         }
  104.     };
  105.     step();
  106. };