我正在开发一个新的jQuery自定义滚动,因为我遇到的其他滚动版本并没有与最新版本的jQuery保持同步。我现在正好了解基础知识。
我正试图点击鼠标滚轮按钮来触发事件并更改光标,但这证明有一些困难;
$(document).on({
mousedown: function(e) {
"use strict";
e.preventDefault();
if (e.which === 2) {
$('html,body').css('cursor','all-scroll');
$(window).data('isDown', true).data('mPosX', e.pageX).data('mPosY', e.pageY);
}
},
mouseup: function(e) {
"use strict";
e.preventDefault();
if (e.which === 2) {
$(window).data('isDown', false);
}
},
mousemove: function(e) {
"use strict";
if ($(window).data('isDown')) {
var CmPosX = e.pageX,
CmPosY = e.pageY,
mPosX = $(window).data('mPosX'),
mPosY = $(window).data('mPosY');
console.log('Original X: ' + mPosX +
', New X: ' + CmPosX +
' | Original Y: ' + mPosY +
', New Y: ' + CmPosY
);
}
}
});
$(document).keydown(function(e){
"use strict";
switch(e.keyCode) {
case 32:
console.log("Spacebar pressed");
break;
case 33:
console.log("Page Up pressed");
break;
case 34:
console.log("Page Down pressed");
break;
case 37:
console.log("Left Arrow pressed");
break;
case 38:
console.log("Up Arrow pressed");
break;
case 39:
console.log("Right Arrow pressed");
break;
case 40:
console.log("Down Arrow pressed");
break;
}
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
我已尝试通过在我的脚本中实现$('html,body').css('cursor','all-scroll');
来点击鼠标滚轮按钮来更改光标,但这只会在您释放鼠标滚轮按钮后发生变化。
在谷歌浏览器中,在您可以滚动的页面上,按下时鼠标滚轮会在保持并在每个指南针方向(即北,东北,东......)移动时更改并再次更改。
我知道这个部分需要检查当前位置与原始位置,但是对于这些类型的光标,我找不到它们。