JSFiddle - React, Tailwind, and code Playground

by Alexey Mishin

HTML

<p>Scrolled: <b id="scrollCounter">0</b>.</p>
<div class="box">
  <p class="paragraph">
    Once a liar, always a liar, the old saying goes. Turns out there’s some scientific truth        to that: researchers have tracked down how the brain makes lying easier as the untruths build up, providing some biological evidence for why small lies often balloon into ever larger ones.

    In a study published in Nature Neuroscience, Tali Sharot from the department of experimental psychology at University College London and her colleagues devised a clever study to test people’s dishonest tendencies while scanning their brains in an fMRI machine. The 80 people in the study were shown pennies in a glass jar and given different incentives to guide whether they lied or told the truth to a fellow partner about how much money was contained in the jar. In some conditions, both the participant and the partner benefited if the participant lied; in others, just the participant benefited from his fib, or just the partner benefited (with no cost to either). In another set of scenarios, either the participant or partner benefited, but at the expense of the other if the participant lied. In each case, Sharot documented the changes in the people’s brains as they made their decisions.
  </p>
</div>

CSS

div.box {
  width: 260px;
  height: 270px;
  padding: 20px;
  padding-top: 10px;
  margin: 10px auto;
  background-color: lightgrey;
  text-align: center;
  
  border: 5px solid grey;
  overflow: scroll;
}

JavaScript

var div = document.getElementsByClassName("box")[0];
var p = document.getElementsByClassName("paragraph")[0];
var scrollCounter = document.getElementById("scrollCounter");

div.onscroll = function(e) {
  var scrolled = div.pageYOffset || div.scrollTop;
	scrollCounter.innerHTML = scrolled;
}