JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <svg>
      <text id="fixed-text" x="200" y="50">Fixed text vertically, but not horizontally</text>
    </svg>
  </div>

CSS

div {
      border: 1px solid black;
      width: 300px;
      height: 30vh;
      margin: auto;
      overflow: auto;
    }
    svg {
      width: 400px; 
      height: 2000px;
    }
    text {
      text-anchor: middle;
    }

JavaScript

var container = document.getElementById('container');
var fixedText = document.getElementById('fixed-text');
fixedText.setAttribute('y', container.scrollTop + 50);
 container.addEventListener('scroll', function() {
   fixedText.setAttribute('y', container.scrollTop + 50);
 });