| <!doctype html> |
| <meta charset=utf-8> |
| <html> |
| <head> |
| <title>Test Actions</title> |
| <style> |
| div { padding:0px; margin: 0px; } |
| .area { width: 100px; height: 50px; background-color: #ccc; } |
| #scrollable { width: 100px; height: 100px; overflow: scroll; } |
| #scrollContent { width: 600px; height: 1000px; background-color: blue; } |
| #subframe { width: 100px; height: 100px; } |
| </style> |
| <script> |
| "use strict"; |
| var els = {}; |
| var allEvents = { events: [] }; |
| function displayMessage(message) { |
| document.getElementById("events").innerHTML = "<p>" + message + "</p>"; |
| } |
| |
| function appendMessage(message) { |
| document.getElementById("events").innerHTML += "<p>" + message + "</p>"; |
| } |
| |
| function recordWheelEvent(event) { |
| allEvents.events.push({ |
| "type": event.type, |
| "button": event.button, |
| "buttons": event.buttons, |
| "deltaX": event.deltaX, |
| "deltaY": event.deltaY, |
| "deltaZ": event.deltaZ, |
| "deltaMode": event.deltaMode, |
| "target": event.target.id |
| }); |
| appendMessage(event.type + " " + |
| "button: " + event.button + ", " + |
| "pageX: " + event.pageX + ", " + |
| "pageY: " + event.pageY + ", " + |
| "button: " + event.button + ", " + |
| "buttons: " + event.buttons + ", " + |
| "deltaX: " + event.deltaX + ", " + |
| "deltaY: " + event.deltaY + ", " + |
| "deltaZ: " + event.deltaZ + ", " + |
| "deltaMode: " + event.deltaMode + ", " + |
| "target id: " + event.target.id); |
| } |
| |
| function resetEvents() { |
| allEvents.events.length = 0; |
| displayMessage(""); |
| } |
| |
| document.addEventListener("DOMContentLoaded", function() { |
| var outer = document.getElementById("outer"); |
| outer.addEventListener("wheel", recordWheelEvent); |
| |
| var scrollable = document.getElementById("scrollable"); |
| scrollable.addEventListener("wheel", recordWheelEvent); |
| }); |
| </script> |
| </head> |
| <body> |
| <div> |
| <h2>ScrollReporter</h2> |
| <div id="outer" class="area"> |
| </div> |
| </div> |
| <div> |
| <h2>OverflowScrollReporter</h2> |
| <div id="scrollable"> |
| <div id="scrollContent"></div> |
| </div> |
| </div> |
| <div> |
| <h2>IframeScrollReporter</h2> |
| <iframe id='subframe' srcdoc=' |
| <script> |
| document.scrollingElement.addEventListener("wheel", |
| function(event) { |
| window.parent.allEvents.events.push({ |
| "type": event.type, |
| "button": event.button, |
| "buttons": event.buttons, |
| "deltaX": event.deltaX, |
| "deltaY": event.deltaY, |
| "deltaZ": event.deltaZ, |
| "deltaMode": event.deltaMode, |
| "target": event.target.id |
| }); |
| } |
| ); |
| </script> |
| <div id="iframeContent" |
| style="width: 7500px; height: 7500px; background-color:blue" ></div>'> |
| </iframe> |
| </div> |
| <div id="resultContainer"> |
| <h2>Events</h2> |
| <div id="events"></div> |
| </div> |
| </body> |
| </html> |
