JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<body onload="Init();">
    <div id="myDiv" style="width:200px;height:200px; overflow:auto; background-color:#e0a0a0;">
        <nobr>Text of the first line.</nobr><br/>
        <nobr>Text of the second line.</nobr><br/>
        <nobr>Text of the third line.</nobr><br/>
        <nobr>Text of the fourth line.</nobr><br/>
        <nobr>Text of the fifth line.</nobr><br/>
        <nobr>Text of the sixth line.</nobr><br/>
    </div>
    <br /><br /><br />
    <button onclick="ResizeTo(100, 100);">Resize to 100*100</button>
    <button onclick="ResizeTo(200, 100);">Resize to 200*100</button>
    <button onclick="ResizeTo(100, 200);">Resize to 100*200</button>
    <button onclick="ResizeTo(200, 200);">Resize to 200*200</button>
</body>

CSS

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

JavaScript

function Init() {
    var div = document.getElementById ("myDiv");
    if (div.addEventListener) {
      div.addEventListener ('overflowchanged', OnOverflowChanged, false);
    }
  }

function OnOverflowChanged(event) {
alert(event.orient)
  switch (event.orient) {
    case OverflowEvent.HORIZONTAL:
      alert ("The visibility of the vertical scrollbar is changed.");
      break;
    case OverflowEvent.VERTICAL:
      alert ("The visibility of the horizontal scrollbar is changed.");
      break;
    case OverflowEvent.BOTH:
      alert ("The visibility of the horizontal and vertical scrollbars are also changed.");
      break;
  }

  if (event.horizontalOverflow) {
    alert ("The contents overflow horizontally.");
  }
  else {
    alert ("The contents do not overflow horizontally.");
  }

  if (event.verticalOverflow) {
    alert ("The contents overflow vertically.");
  }
  else {
    alert ("The contents do not overflow vertically.");
  }
}

function ResizeTo(w, h) {
  var div = document.getElementById ("myDiv");
  div.style.width = w + "px";
  div.style.height = h + "px";
}