I have component to which I attach a debounced scrollwheel event handler.

If the Ctrl key is down, then I modify the event’s deltaY value:

componentDidMount() {
  window.addEventListener('wheel', this.handleWheel, { passive: false });
}

componentWillUnmount() {
  window.removeEventListener('wheel', this.handleWheel);
}

handleWheel = debounce((e) => {
  const delta = (e.ctrlKey) ? 10 * e.deltaY : e.deltaY;
  // do stuff with delta
}, 10)

This works correctly. I hold down the Ctrl key and the value of delta is a modified version of the scrollwheel e.deltaY value. So far, so good.

I would now like to try to use the Shift key in place of the Ctrl key.

If I use e.shiftKey in place of e.ctrlKey, the code in handleWheel is not executed. I have to release the Shift key to get handleWheel to execute (which then evaluates delta without modifying it).

What is the correct way for handling the Shift key in this context?

This is the debounce function I am using:

const debounce = (callback, wait) => {
  let timeoutId = null;
  return (...args) => {
    window.clearTimeout(timeoutId);
    timeoutId = window.setTimeout(() => {
      callback.apply(null, args);
    }, wait);
  };
}