Zoom & Pan 2 изображения в синхронизации c - колесо и касание - проблема с указателем

Question

Мне нужно 2 изображения для Zoom & Pan в идеальном режиме c, с помощью колесика мыши и сенсорных событий.

Масштабирование колес работает нормально, но у меня есть 2 проблемы:

1. Панорамирование одного изображения панорамирует только другое изображение (см. Событие указателя)
2. Сенсорное масштабирование одного изображения панорамирует другое изображение

Fiddle: https://jsfiddle.net/sw5bdy6f/

var flagWheel = false;
document.getElementById("ui-id-1").addEventListener("wheel", function(e) {
  if (flagWheel) {
    flagWheel = false;
    return;
  };

  flagWheel = true;
  console.log("wheelOfer");
  console.log(e);

  var newEvent = new WheelEvent("wheel", {
    'bubbles': e.bubbles,
    'cancelable': e.cancelable,
    'view': e.view,
    'deltaY': e.deltaY,
    'deltaMode': e.deltaMode,
    'clientX': e.clientX + window.innerWidth / 2,
    'clientY': e.clientY,
    'screenX': e.screenX + window.innerWidth / 2,
    'screenY': e.screenY,
  });

  console.log(newEvent);

  var elementToTrigger = document.getElementById("ui-id-2");
  elementToTrigger.dispatchEvent(newEvent);

  console.log(e);
  console.log(newEvent);
});

document.getElementById("ui-id-2").addEventListener("wheel", function(e) {
  if (flagWheel) {
    flagWheel = false;
    return;
  };

  flagWheel = true;
  console.log("wheelOfer");
  console.log(e);

  var newEvent = new WheelEvent("wheel", {
    'bubbles': e.bubbles,
    'cancelable': e.cancelable,
    'view': e.view,
    'deltaY': e.deltaY,
    'deltaMode': e.deltaMode,
    'clientX': e.clientX - window.innerWidth / 2,
    'clientY': e.clientY,
    'screenX': e.screenX - window.innerWidth / 2,
    'screenY': e.screenY,
  });

  console.log(newEvent);

  var elementToTrigger = document.getElementById("ui-id-1");
  elementToTrigger.dispatchEvent(newEvent);
});

/////////////////////////////////////////////////////////////////////////////////////////////           
var flagPointerdown = false;

document.getElementById("ui-id-1").addEventListener("pointerdown", function(e) {
  if (flagPointerdown) {
    flagPointerdown = false;
    return;
  };

  flagPointerdown = true;
  console.log("pointerdownOfer");
  console.log(e);

  var newEvent = new PointerEvent("pointerdown", e);
  console.log(newEvent);

  var elementToTrigger = document.getElementById("ui-id-2");
  elementToTrigger.dispatchEvent(newEvent);

  console.log(e);
  console.log(newEvent);
});

document.getElementById("ui-id-2").addEventListener("pointerdown", function(e) {
  if (flagPointerdown) {
    flagPointerdown = false;
    return;
  };

  flagPointerdown = true;

  console.log("pointerdownOfer");
  console.log(e);

  var newEvent = new PointerEvent("pointerdown", e);
  console.log(newEvent);

  var elementToTrigger = document.getElementById("ui-id-1");
  console.log(elementToTrigger);
  elementToTrigger.dispatchEvent(newEvent);
  console.log(e);
  console.log(newEvent);
});