Set a fixed x axis and scrollable y axis in chartjs

Question

I am trying to render a fixed axis on a chartjs horizontal bar chart and so far I have been able to render a fixed x axis but want it to cover the bars behind it.

$(document).ready(function () {
    const scroll = document.getElementById('scroll');
    function generateLabels() {
        var chartLabels = [];
        for (x = 0; x < 100; x++) {
            chartLabels.push("Label" + x);
        }
        return chartLabels;
    }

    function generateData() {
        var chartData = [];
        for (x = 0; x < 100; x++) {
            chartData.push(Math.floor((Math.random() * 100) + 1));
        }
        return chartData;
    }

//     function addData(numData, chart) {
//         for (var i = 0; i < numData; i++) {
//             chart.data.datasets[0].data.push(Math.random() * 100);
//             chart.data.labels.push("Label" + i);
//             var newHeight = $('.chartAreaWrapper2').height();
//             $('.chartAreaWrapper2').width(newHeight);
//         }
//     }

    var chartData = {
        labels: generateLabels(),
        datasets: [{
            label: "Test Data Set",
            data: generateData(),
            borderRadius: 30,
        }]
    };


        var rectangleSet = false;

        var canvasTest = $('#chart-Test');
        var chartTest = new Chart(canvasTest, {
            type: 'bar',
            data: chartData,
            maintainAspectRatio: false,
            responsive: true,
            options: {
                layout: {
                  padding: {
                    bottom: 20,
                    left: 0
                  }
                },
                backgroundColor: '#FF6700',
                scales: {
                  x:  {
                    color: '#999999',
                    position: {
                      y: 30,
                      x: 0
                    },
                    padding:  {
                      top: 10,
                    },
                    grid: {
                    borderColor: '#999999'
        }}
                },
              y: {                    
                   color: '#999999'
                 },
                plugins: {
                  legend: false,                    
                },
                indexAxis: 'y',
                tooltips: {
                    titleFontSize: 0,
                    titleMarginBottom: 0,
                    bodyFontSize: 12
                },
            }
        });
//         addData(5, chartTest);
  
scroll.addEventListener('scroll', function(e) {
  pos = chartTest.scales.y.getValueForPixel(scroll.scrollTop + 250);
  chartTest.options.scales.x.position = {x: pos};
  console.log(pos)
  chartTest.update();
});

});

.chartWrapper {
  position: relative;
}

.chartWrapper > canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  height: 300px;
  overflow-y: scroll;
  background-color:  #1C1C1C;
}

<div class="chartWrapper">
  <div id="scroll" class="chartAreaWrapper">
  <div class="chartAreaWrapper2">
      <canvas id="chart-Test" height="300" width="300"></canvas>
  </div>
  </div>
</div>

I have reproduced the issue here on jsbin

https://jsbin.com/hajugok/2/edit?html,js,output