This might be a specific question but here we go. I am trying to implement a waveform using wavesurferjs and rendering a div element over it. I want to use the wavesurfer zoom function to zoom in the waveform when on mobile. The problem here is, How can I make the div element rendered over the wavform zoomed in, responsive and scrollable in the same way as the waveform.

What I have tried:

I have managed to do a workaround solution where I would manually set the div width of the waveform instead of using zoom() but it's not as clean as using the built in functionality.

My code

The wavesurfer configuration

 const formWaveSurferConfig = (ref) => ({
  container: ref,
  waveColor: "rgb(180,180,180)",
  barWidth: 3,
  barRadius: 3,
  // scrollParent: false,
  responsive:true,
  interact:false,
  fillParent: true,
  // autocenter: false,
  height: 130,
  cursorWidth: 0,
  normalize: true,
  partialRender: true,
  plugins: [
    Cursor.create({
      showTime: true,
      opacity: 1,
      width: "1px",
      customShowTimeStyle: {
        "background-color": "#000",
        color: "#fff",
        padding: "2px",
        "font-size": "10px",
      }
    })
  ],
});

I create the waveform and here are my elements:

<div style={{
    position: "relative",
    width: "90%",
    height: 160,
    margin: "auto",
    overflowX: "auto",
    paddingBottom: 10,}}>
        <div 
          style={{
    height:90, 
    zIndex: 5,
    pointerEvents: "none",
    position: "absolute",
    top: 0,
    width: areaRef.current?.offsetWidth}}
        >
          <Chart data={chartData}/>
        </div>
        <div
          onClick={handleMouseClick}
          style={{ 
          position: "absolute",
          bottom: 0,
          overflow: "auto hidden",
          width: "100%" }}
          id="waveform"
          ref={areaRef}>
        </div>
</div>
<Button 
    color="primary"  
    onClick={() => {
      setIsZoomed(!isZoomed);
      wavesurfer.current?.zoom(isZoomed? 1 : 40);
    }}>
    {!isZoomed ? "+" : "-"}
  </Button>

Notes about the problem

As stated above, I have done the workaround where I would not use the zoom function and instead just set the widths of my elements to 300% for example. I have tried to modify the css but without luck. Let's not forget that the zoom function also autocenters the waveform on the progress when the track is playing. That means that the div element also has to follow that centering. I am currently trying to check if the OnScroll event can be used to do that.