JSFiddle - React, Tailwind, and code Playground

by wijesijp

HTML

<div id="view">aaa</div>
<button onclick="ChromeWheel()">Send event</button>

CSS

#view {border: solid red 1px}

JavaScript

function wheel(event) {
//    console.log(event.detail)
    alert(event.detail);
}

var view;
window.onload = function() {
  view = document.getElementById('view');
  view.addEventListener('DOMMouseScroll', wheel, false);
}
    
window.ChromeWheel  = function() {
  var evt = document.createEvent("MouseEvents");
evt.initMouseEvent(
  'DOMMouseScroll', // in DOMString typeArg,
   true,  // in boolean canBubbleArg,
   true,  // in boolean cancelableArg,
   window,// in views::AbstractView viewArg,
   120,   // in long detailArg,
   0,     // in long screenXArg,
   0,     // in long screenYArg,
   0,     // in long clientXArg,
   0,     // in long clientYArg,
   0,     // in boolean ctrlKeyArg,
   0,     // in boolean altKeyArg,
   0,     // in boolean shiftKeyArg,
   0,     // in boolean metaKeyArg,
   0,     // in unsigned short buttonArg,
   null   // in EventTarget relatedTargetArg
);
  view.dispatchEvent(evt);
}