JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Header">
  <button class="js-decSize">decrease size</button>
  <button class="js-incSize">increase size</button>
</div>
<div class="TextContainer">
<h2>h0: Lorem ipsum</h2>
<p>
  p0: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, ut. Saepe natus pariatur, maiores dolorum ea modi impedit ipsum eum, minus obcaecati, illum deserunt quam doloremque reprehenderit vero voluptatum voluptates!
</p>

<h2>h1: Lorem ipsum</h2>
<p>
  p1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, ut. Saepe natus pariatur, maiores dolorum ea modi impedit ipsum eum, minus obcaecati, illum deserunt quam doloremque reprehenderit vero voluptatum voluptates!
</p>

<h2>h2: Lorem ipsum</h2>
<p>
  p2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, ut. Saepe natus pariatur, maiores dolorum ea modi impedit ipsum eum, minus obcaecati, illum deserunt quam doloremque reprehenderit vero voluptatum voluptates!
</p>

<h2>h3: Lorem ipsum</h2>
<p>
  p3: ipsum dolor sit amet, consectetur adipisicing elit. Non, ut. Saepe natus pariatur, maiores dolorum ea modi impedit ipsum eum, minus obcaecati, illum deserunt quam doloremque reprehenderit vero voluptatum voluptates!
</p>

<h2>h4: Lorem ipsum</h2>
<p>
  p4: ipsum dolor sit amet, consectetur adipisicing elit. Non, ut. Saepe natus pariatur, maiores dolorum ea modi impedit ipsum eum, minus obcaecati, illum deserunt quam doloremque reprehenderit vero voluptatum voluptates!
</p>

<h2>h5: Lorem ipsum</h2>
<p>
  p5: ipsum dolor sit amet, consectetur adipisicing elit. Non, ut. Saepe natus pariatur, maiores dolorum ea modi impedit ipsum eum, minus obcaecati, illum deserunt quam doloremque reprehenderit vero voluptatum voluptates!
</p>

<h2>h6: Lorem ipsum</h2>
<p>
  p6: ipsum dolor sit amet, consectetur adipisicing elit. Non, ut. Saepe natus pariatur, maiores dolorum ea modi impedit ipsum eum, minus obcaecati, illum deserunt quam doloremque reprehenderit vero voluptatum voluptates!
</p>
</div>

CSS

.TextContainer {
  height: 300px;
  overflow-y: scroll;
  background: #efefef;
}

JavaScript

var fontSize = 16;
var dSize = 4;

var textContainer = document.querySelector(".TextContainer");

function setSize() {
 	var heightBefore = textContainer.scrollHeight;
  var scrollBefore = textContainer.scrollTop;
  var percBefore = scrollBefore / heightBefore;
  
	textContainer.style.fontSize = fontSize + "px";
  
  var heightAfter = textContainer.scrollHeight;
  var scrollAfter = textContainer.scrollTop;
  var percAfter = scrollAfter / heightAfter;
  
  var correctedScrollAfter = Math.floor(heightAfter * percBefore);
  textContainer.scrollTop = correctedScrollAfter;
}

function incFontSize() {
	fontSize = Math.min(fontSize + dSize, 64);
  setSize();
}

function decFontSize() {
	fontSize = Math.max(fontSize - dSize, 4);
  setSize();
}

document.querySelector(".js-incSize").addEventListener("click", incFontSize);
document.querySelector(".js-decSize").addEventListener("click", decFontSize);