tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

actions_scroll.html (3514B)

      1 <!doctype html>
      2 <meta charset=utf-8>
      3 <html>
      4  <head>
      5    <title>Test Scroll Actions</title>
      6    <style>
      7      div {
      8        padding: 0;
      9        margin: 0;
     10      }
     11 
     12      #not-scrollable {
     13        margin-bottom: 100px;
     14        width: 100px;
     15        height: 50px;
     16      }
     17 
     18      #not-scrollable-content {
     19        width: 200px;
     20        height: 100px;
     21        background-color: #ccc;
     22      }
     23 
     24      #scrollable {
     25        width: 100px;
     26        height: 100px;
     27        overflow: scroll;
     28      }
     29 
     30      #scrollable-content {
     31        width: 600px;
     32        height: 1000px;
     33        background-color: blue;
     34      }
     35 
     36      #iframe {
     37        width: 100px;
     38        height: 100px;
     39      }
     40 
     41      #event-reporter {
     42        white-space: pre-line;
     43      }
     44    </style>
     45 
     46    <script>
     47      var eventReporter;
     48      var allEvents = { events: [] };
     49 
     50      function addMessage(message) {
     51        eventReporter.textContent = `${message}\n${eventReporter.textContent}`;
     52      }
     53 
     54      function recordWheelEvent(event) {
     55        allEvents.events.push({
     56          "type": event.type,
     57          "button": event.button,
     58          "buttons": event.buttons,
     59          "pageX": event.pageX,
     60          "pageY": event.pageY,
     61          "deltaX": event.deltaX,
     62          "deltaY": event.deltaY,
     63          "deltaZ": event.deltaZ,
     64          "deltaMode": event.deltaMode,
     65          "target": event.target.id,
     66        });
     67 
     68        addMessage(
     69          "type: " + event.type + " " +
     70          "button: " + event.button + ", " +
     71          "buttons: " + event.buttons + ", " +
     72          "pageX: " + event.pageX + ", " +
     73          "pageY: " + event.pageY + ", " +
     74          "deltaX: " + event.deltaX + ", " +
     75          "deltaY: " + event.deltaY + ", " +
     76          "deltaZ: " + event.deltaZ + ", " +
     77          "deltaMode: " + event.deltaMode + ", " +
     78          "target id: " + event.target.id
     79        );
     80      }
     81 
     82      document.addEventListener("DOMContentLoaded", function () {
     83        eventReporter = document.getElementById("event-reporter");
     84 
     85        var noScroll = document.getElementById("not-scrollable");
     86        noScroll.addEventListener("wheel", recordWheelEvent);
     87 
     88        var scrollable = document.getElementById("scrollable");
     89        scrollable.addEventListener("wheel", recordWheelEvent);
     90      });
     91    </script>
     92  </head>
     93 
     94  <body>
     95    <div>
     96      <h2>Scroll Reporter</h2>
     97      <div id="not-scrollable">
     98        <div id="not-scrollable-content"></div>
     99      </div>
    100    </div>
    101 
    102    <div>
    103      <h2>Overflow Scroll Reporter</h2>
    104      <div id="scrollable">
    105        <div id="scrollable-content"></div>
    106      </div>
    107    </div>
    108 
    109    <div>
    110      <h2>iframe Scroll Reporter</h2>
    111      <iframe id="iframe" srcdoc='
    112        <script>
    113          document.scrollingElement.addEventListener("wheel", event => {
    114            window.parent.recordWheelEvent({
    115              "type": event.type,
    116              "button": event.button,
    117              "buttons": event.buttons,
    118              "pageX": event.pageX,
    119              "pageY": event.pageY,
    120              "deltaX": event.deltaX,
    121              "deltaY": event.deltaY,
    122              "deltaZ": event.deltaZ,
    123              "deltaMode": event.deltaMode,
    124              "target": event.target
    125            });
    126          });
    127        </script>
    128        <div id="iframeContent" style="width: 7500px; height: 7500px; background-color:blue">
    129        </div>'>
    130      </iframe>
    131    </div>
    132 
    133    <div id="resultContainer">
    134      <hr />
    135      <h2>Events</h2>
    136      <div id="event-reporter"></div>
    137    </div>
    138  </body>
    139 </html>