Scrollbar

Scrollbar Directive #

Allows to add overlay scrollbars that will look the same for every browser. The directive sets up the scrollbars from the library OverlayScrollbars.

<div class="d-hmx164 d-w30p d-bar8 d-ba d-bc-default" v-dt-scrollbar>
  <dt-stack>
    <div v-for="item in items" class="item">
      {{ item}}
    </div>
  </dt-stack>
</div>

<div class="d-hmx164 d-w30p d-bar8 d-ba d-bc-default d-scrollbar" data-overlayscrollbars="host"
  data-overlayscrollbars-initialize="true">
  <div class="os-size-observer">
    <div class="os-size-observer-listener"></div>
  </div>
  <div data-overlayscrollbars-viewport="scrollbarHidden overflowXHidden overflowYScroll" tabindex="-1">
    <div class="item">user 1</div>
    ...
  </div>
  <div class="os-scrollbar os-scrollbar-horizontal os-theme-dark os-scrollbar-auto-hide
  os-scrollbar-handle-interactive os-scrollbar-cornerless os-scrollbar-unusable">
    <div class="os-scrollbar-track">
      <div class="os-scrollbar-handle"></div>
    </div>
  </div>
  <div class="os-scrollbar os-scrollbar-vertical os-theme-dark os-scrollbar-auto-hide
  os-scrollbar-handle-interactive os-scrollbar-visible os-scrollbar-cornerless">
    <div class="os-scrollbar-track">
      <div class="os-scrollbar-handle"></div>
    </div>
  </div>
</div>

Usage #

Import the directive and styling from dialtone

import { DtScrollbarDirective } from "@dialpad/dialtone/vue";

// Import styling
import 'overlayscrollbars/overlayscrollbars.css';

Install the directive into vue instance

app.use(DtScrollbarDirective);

To add a custom overlay scrollbar to a scrollable region, apply the v-dt-scrollbar directive to the parent element of the desired region. This parent element should have one and only one child. In the case where there are siblings, the scrollable element should be wrapped inside a new <div> tag with the directive attached by adding <div v-dt-scrollbar></div> around the element. There is no need to explicitly add an overflow property. If the section overflows the available vertical space, a vertical scrollbar will be present. Similarly, if it exceeds the horizontal space, a horizontal scrollbar will appear.

Characteristics #

• Has an overlay style: it appears on top of the content rather than the scrollbar taking up space within the container.
• It grows when hovering the scrollbar handle for better accessibility.
• Appears when the mouse enters the scrollable area and disappears on mouse out after a certain time. This can be customized, see variants.
• The look and feel will be the same for every browser and OS.
• Emulates a browser's native scrollbar keyboard and mouse events.

Variants #

To customize the behavior of the scrollbar, you can use different arguments with the directive. The allowed arguments are 'leave' (default), 'never', 'scroll', and 'move'.

Enter (Default) #

Show the scrollbar when the mouse enters the scrollable area. This is the default option, so no argument is needed.

<div v-dt-scrollbar></div>

Always #

Always show the scrollbar if the region is overflowing the available space.

<div v-dt-scrollbar:never></div>

Scroll #

Show the scrollbar on scroll.

<div v-dt-scrollbar:scroll></div>

Move #

Show the scrollbar when the mouse moves inside the scrollable area.

<div v-dt-scrollbar:move></div>

Limitations #

Adding this directive to a DOM element or a Vue component will alter the DOM structure, by adding four elements inside the one that the directive was attached to. If the scrollable region is a Vue component, it's recommended to wrap it in a <div v-dt-scrollbar></div>, to avoid altering the structure that the component needs.

The added elements are:

• One with the class os-size-observer
• The second one is the scrollable viewport
• The horizontal scrollbar
• The vertical scrollbar

This can make it challenging to use with components that rely on event listeners or may even render it unusable.