vw scrollbar when content will fit, but don't

by jonjohnjohnson

HTML

<main>
<section>
<div>

</div>
</section>
</main>

CSS

body {
  margin: 0;
}
section {
  width: 100%;
}
div {
  height: 0;
  width: 100%;
  padding-bottom: calc(100% - 60vw);
  background: red;
  opacity: .5;
}
main {
  display: flex;
  align-items: flex-start;
  background: purple;
  height: 200px;
  overflow: scroll;
}
.overflowed main::after {
  content: '';
  display: block;
  width: 30px;
  height: 100%;
  background: #000;
}

JavaScript

var start = null;
var SECTION = document.querySelector('section');
var MAIN = document.querySelector('main');

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  
  if (progress > 500) {
  	start = timestamp;
    var heightSec = parseInt(window.getComputedStyle(SECTION).height, 10);
    var heightMain = parseInt(window.getComputedStyle(MAIN).height, 10);
    if (heightSec > heightMain) {
      document.body.classList.add('overflowed');
    } else {
      document.body.classList.remove('overflowed');
    }
  }
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);