Scrollbar when zooming

[sojastar]

Hello,

Are there any options for the scrollbar that appears when the waveform is wider than its container? The zooming example shows a scrollbar under the waveform when it overflows. In my app, a tiny scrollbar appears under the waveform when it overflows but is soon fades away. I have tried to access it and style it with CSS, but I don't see the HTML element (if there is one).

Here is how I create my wavesurfer instance:

let noteEditorWavesurfer = WaveSurfer.create({
  container:      document.querySelector("#noteEditorWaveform"),
  barWidth:       9,
  barHeight:      1,
  barGap:         9,
  waveColor:      "black",
  progressColor:  "white",
  interact:       false,
  scrollParent:   true,
  fillParent:     false,
  plugins: [
    WaveSurfer.regions.create({
      regionsMinLength: 0.1,
      regions:          [ { id:     "noteEditorRegion",
                            start:  note.in,
                            end:    note.out,
                            loop:   false,
                            drag:   false,
                            color: 'rgba(1.0, 1.0, 1.0, 0.2)' } ] } ) ]
});

I have tried to change interact to true, but that hasn't changed anything.

Thank you very much!

[katspaugh]

So you want the scrollbar to be always visible?

[sojastar]

Yes.

[katspaugh]

AFAIK, on windows it's always visible by default (as long as there's something to scroll).
On mac, you can override the default system settings with some CSS for #noteEditorWaveform > wave: https://codepen.io/ppolyzos/pen/AWKgOv.

[sojastar]

Sorry. I was testing inside the Firefox mobile emulator and it looks like iOS always hides the scrollbar. It's properly there when I switch to desktop mode.

Thanks for the pointer though! And for your always so prompt replies!

[sojastar]

Ooops, closing the discussion.