TestEvent_Wheel.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5. <title>Project1</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style>
  8. body {
  9. margin: 0px;
  10. font-size: 20px;
  11. }
  12. </style
  13. </head>
  14. <body>
  15. <div id="Div1" style="font-size: 20px; width: 200px; height: 200px; position: relative; border: 1px solid black; overflow: scroll;">
  16. <div id="Div2" style="width: 180px; height: 400px; position: absolute; left: 2px; top: 2px; border: 1px solid blue; overflow: scroll;">
  17. <div id="Div3" style="width: 160px; height: 600px; position: absolute; left: 2px; top: 2px; border: 1px solid red;">
  18. Label1
  19. </div>
  20. </div>
  21. </div>
  22. <script>
  23. window.addEventListener("load", (event) => {
  24. var El = document.getElementById('Div1');
  25. El.addEventListener("wheel", function(e){
  26. console.log('Div1 Mode='+e.deltaMode+' X='+e.deltaX+' Y='+e.deltaY);
  27. });
  28. var El = document.getElementById('Div2');
  29. El.addEventListener("wheel", function(e){
  30. console.log('Div2 Mode='+e.deltaMode+' X='+e.deltaX+' Y='+e.deltaY);
  31. });
  32. });
  33. </script>
  34. </body>
  35. </html>