I've been trying to make slider scrollbars always visible and tried to implement it with simplebar library.
But appying necessary attributes to dom elements, scrollbar is still not visible. Even though simplebar classnames are already in html dom, see screenshot.
Also some style doesn't work. For instance trying to change bg color(.simplebar-scrollbar::before) doesn't work.
But mostly what I am trying to achive is to make scrollbar always visible.
Here is how I did it. The component
import { Component, Host, h, Element } from '@stencil/core';
import SimpleBar from 'simplebar';
import 'simplebar/dist/simplebar.css';
import ResizeObserver from 'resize-observer-polyfill';
(window as any).ResizeObserver = ResizeObserver;
@Component({
tag: 'simplebar-test',
styleUrl: 'simplebar-test.css',
shadow: true,
})
export class SimplebarTest {
@Element() private element: HTMLElement;
private simplebarInstance: any;
componentDidLoad() {
this.simplebarInstance = new SimpleBar(this.element.shadowRoot.querySelector('.content'), { autoHide: false });
//this.simplebarInstance = new SimpleBar(document.getElementById('content'));
}
disconnectedCallback() {
this.simplebarInstance.unMount();
}
render() {
return (
<Host>
<div class="wrapper">
<div class="content" data-simplebar data-simplebar-auto-hide="false">
<p>Example content</p>
... // 10 * p
</div>
</div>
</Host>
);
}
}
and css
:host {
display: block;
}
.content {
border: 1px solid black;
width: 500px;
height: 500px;
}
.simplebar-content-wrapper {
scrollbar-width: auto;
-ms-overflow-style: auto;
}
.simplebar-content {
scrollbar-width: auto;
-ms-overflow-style: auto;
display: flex !important;
}
.simplebar-scrollbar::before {
background-color: red;
color: red;
}
.simplebar-scrollbar {
background-color: red;
color: red;
}
Any help will be appreciated.
