Add <textarea> support

[dannybeckett]

Is your feature request related to a problem? Please describe.
The problem is that <textarea>'s have browser-native gray scrollbars

Describe the solution you'd like
Custom scrollbars

Describe alternatives you've considered
None

Additional context
According to discussion #504 this is planned, but it is not currently tracked by an open issue so I have created one so it doesn't get lost

[KingSora]

Good day @dannybeckett :)

Thanks for opening the issue! Textarea and other field elements aren't supported by the core API, but its certainly achievable. As an example I've created a fieldPlugin which handles this usecase: https://stackblitz.com/edit/overlayscrollbars-fazspcjf?file=src%2FfieldPlugin.ts

The idea is to have a single field child inside the target element. If thats detected the size of the field has to change according to its content. Essentially you would like to use the field-sizing: content css property when available and polyfill it with a fallback when not. Thats it, now you can place and field inside of OverlayScrollbars and it will look like it has its own styled scrollbars.

[AlexeiGitHub]

Hi @KingSora. I don't fully understand how this plugin will connect to React. I'm trying to do this but it doesn't work.

// main.tsx
// ...imports
import { ClickScrollPlugin, OverlayScrollbars } from 'overlayscrollbars';
import { osFieldPlugin } from './fieldPlugin.ts';

OverlayScrollbars.plugin([ClickScrollPlugin, osFieldPlugin]);
// createRoot...

// component.tsx
import {
  OverlayScrollbarsComponent,
} from "overlayscrollbars-react";

//...

<OverlayScrollbarsComponent
  options={{
     // options
  }}
  defer
  data-overlayscrollbars-initialize
>
  <textarea data-overlayscrollbars-field></textarea>
</OverlayScrollbarsComponent>

[KingSora]

@AlexeiGitHub Good day :)

Thanks for pointing that out, it needed just a small adaption in the plugin code. I've updated the original examples code as well das created a react demo: https://stackblitz.com/edit/overlayscrollbars-react-3ffxecbh :)

Should be working with all framework adapters now

[AlexeiGitHub]

Thank you very much, works perfectly. 👍

[AlexeiGitHub]

Hi @KingSora. I tested the example in Safari and Epiphany (WebKit) — the native resizable doesn't work, as if something is blocking it. I played around with the styles but couldn't get it to work, so I implemented a custom resizable solution. Maybe it helps someone!

demo: https://stackblitz.com/edit/overlayscrollbars-react-7bd5aqi1?file=src%2FApp.tsx