scrollbar is not visible until users scrolls

[forethoughtde]

🐛 Bugs

Current Behavior

I use the vue.js plugin for enabling scrollbar visible all the time. For some reasons, the scrollbar is not visible until user scrolls for the first time then it stays visible.

I use the custom attribute data-simplebar-auto-hide="false" to make the scrollbar visible at all times.

<simplebar class="siemens-cross-section-tool-sidebar" data-simplebar-auto-hide="false">
        <div id="componentListContainer">
            <div class="scst_component" v-for="(vCoordinate, index) in turbines"
                 :key="index"
                 v-on:mouseover="mouseOver($event, vCoordinate['id'])"
                 v-on:mouseleave="mouseLeave($event, vCoordinate['id'])" :id="vCoordinate['id']">
                <img src="../../assets/icon_check_2x.png" alt="">
                <p>{{ vCoordinate['name'] }}</p>
                <div class="scst_dots_wrapper">
                    <div v-for="c in colors"
                         class="scst_color_dot"
                         v-bind:style="{ 'border-color': vCoordinate['colors'][c['name']]['hex'], 'background-color':  vCoordinate['colors'][c['name']]['status']}"
                         v-on:click="selectColor(c['name'], vCoordinate['id'])">
                    </div>
                </div>
            </div>
            <p v-if="isShow()" class="scst_no_result">
                No results!
            </p>
        </div>
    </simplebar>

import simplebar from 'simplebar-vue';
import 'simplebar/dist/simplebar.min.css';

export default {
        components : { simplebar }
}

Expected behavior

Scrollbar should be visible from the start.

Software	Version(s)
SimpleBar	3.1.3
Browser	Electron app (Chrome)
npm/Yarn	1.5.1
Operating System	MacOS

[Grsmto]

Weird. In the React env it works fine: http://grsmto.github.io/simplebar/examples

I don't see why Vue would make any difference. You're sure you don't have any CSS clashing?

[adjourn]

I have an idea.

If simplebar DOM is rendered in its entirety beforehand (which I think simplebar-vue does, never used Vue), it doesn't modify classes and DOM ends up with what ever classes were added in render.

Fix: in cases where DOM is created beforehand and autoHide === false, add simplebar-visible class (or custom class if using those) to scrollbar in render, otherwise it won't show up until interacted with.

@Grsmto I use my own React component but I believe that simplebar-react has the same "bug".

My opinion is that core (initDOM) shouldn't worry about that because it's probably a valid use case where you don't want scrollbar to initially show but never disappear again after interaction. What do you think?

[xavimajoral]

Yup, it happens the same with me with simplebar-react
<SimpleBar data-simplebar-auto-hide="false">

[mst5295]

I use the Vue plugin of Simplebar. Here is an example of how I use the simplebar and which CSS styles I use:

list.vue

<simplebar class="simplebar-container"
 data-simplebar-auto-hide="false">
      <v-list>
        ...
      </v-list>
</simplebar>

list.styl

.simplebar-container {
    margin-top: 16px;
    // 100% container height - search - margin - footer
    max-height: calc(100% - 56px - 16px - 56px);
  }

The following GIF shows a section of my Chrome DevTools Elements panel.
After loading the div class contains simplebar-scrollbar.
As soon as I scroll, it changes to simplebar-scrollbar simplebar-visible. It does not change back and the scroll bar is visible all the time.

data-simplebar-auto-hideis probably not checked when loading the component. As a result, scrollbar-visible is not set.

@Grsmto, do not know to what extent you have dealt with this problem, but perhaps my comment will help you to solve it