Code to swap arrow keys on keyboard

Ask the community
,
1

I am developing a website with horizontal scrolling, and I understand this might disrupt the user’s natural navigation patterns. That’s why I’d like to modify the behavior in Editor X. Specifically, I want the up arrow key to function like the right arrow key and the down arrow key to function like the left arrow key. Additionally, I’d like to change the mouse wheel’s direction from up-down to right-left. Here is the code I’ve used so far:

import { onReady } from ‘public/wix-code-interfaces’;

onReady(() => {
$w.document.addEventListener(‘keydown’, function(event) {
switch(event.key) {
case ‘ArrowDown’:
event.preventDefault();
simulateKeyPress(‘ArrowLeft’);
break;
case ‘ArrowLeft’:
event.preventDefault();
simulateKeyPress(‘ArrowDown’);
break;
case ‘ArrowUp’:
event.preventDefault();
simulateKeyPress(‘ArrowRight’);
break;
case ‘ArrowRight’:
event.preventDefault();
simulateKeyPress(‘ArrowUp’);
break;
}
});

$w.document.addEventListener('wheel', function(event) {
    if (event.deltaY > 0) {
        // Wheel moved down
        simulateKeyPress('ArrowLeft');
    } else {
        // Wheel moved up
        simulateKeyPress('ArrowRight');
    }
    event.preventDefault(); // Prevent the default scroll behavior
});

function simulateKeyPress(key) {
    let event = new KeyboardEvent('keydown', { 'key': key });
    $w.document.dispatchEvent(event);
}

});