☰

Vim风格导航

顺滑的滚动；使用j/k上下滚动，gg到顶部，G到底部

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址