Scrollpane

v0.0.0

The Scrollpane enables the user to scroll the content by scrollwheel or by using scroll bars.

<div style="height: 300px">
  <!-- Scrollpane  -->
  <div class="vi-scrollpane">
    <div class="vi-scrollpane__bar">
      ...
    </div>
  </div>
</div>

Horizontal and vertical #

<div style="height: 300px">
  <!-- Scrollpane  -->
  <div class="vi-scrollpane">
    <div class="vi-scrollpane__bar">
      ...
    </div>
  </div>
</div>

Offset modifiers #

Following offset modifier is available:

--normal (also the default)
--loose

Breakpoints can be used like this:

--{breakpoint}-normal

Where breakpoint can be any of the values sm, md, lg xl or xxl

<div style="height: 300px">
  <!-- Scrollpane (mods: --loose) -->
  <div class="vi-scrollpane vi-scrollpane--loose">
    <div class="vi-scrollpane__bar vi-scrollpane__bar--loose">
      ...
    </div>
  </div>
</div>
<div style="height: 300px">
  <!-- Scrollpane (mods: --normal, --md-loose) -->
  <div class="vi-scrollpane vi-scrollpane--normal vi-scrollpane--md-loose">
    <div class="vi-scrollpane__bar vi-scrollpane__bar--normal vi-scrollpane__bar--md-loose">
      ...
    </div>
  </div>
</div>

Color modifiers #

Following color modifiers are available:

--dominant (also the default)
--accent-1
--accent-2
--inversed

Breakpoints can be used like this:

--{breakpoint}-accent-1

Where breakpoint can be any of the values sm, md, lg xl or xxl

Breakpoint modifiers. Resize screen.

<div style="height: 100px">
  <!-- Scrollpane (mods: --dominant) -->
  <div class="vi-scrollpane vi-scrollpane--dominant">
    <div class="vi-scrollpane__bar vi-scrollpane__bar--dominant">
      ...
    </div>
  </div>
</div>
<hr>
<div style="height: 100px">
  <!-- Scrollpane (mods: --accent-1) -->
  <div class="vi-scrollpane vi-scrollpane--accent-1">
    <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-1">
      ...
    </div>
  </div>
</div>
<hr>
<div style="height: 100px">
  <!-- Scrollpane (mods: --accent-2) -->
  <div class="vi-scrollpane vi-scrollpane--accent-2">
    <div class="vi-scrollpane__bar vi-scrollpane__bar--accent-2">
      ...
    </div>
  </div>
</div>
<hr>
<div style="height: 100px">
  <!-- Scrollpane (mods: --inversed) -->
  <div class="vi-scrollpane vi-scrollpane--inversed">
    <div class="vi-scrollpane__bar vi-scrollpane__bar--inversed">
      ...
    </div>
  </div>
</div>
<hr>
<div style="height: 100px">
  <!-- Scrollpane (mods: --md-accent-1, --lg-accent-2, --xl-inversed, --xxl-dominant) -->
  <div class="vi-scrollpane vi-scrollpane--md-accent-1 vi-scrollpane--lg-accent-2 vi-scrollpane--xl-inversed vi-scrollpane--xxl-dominant">
    <div class="vi-scrollpane__bar vi-scrollpane__bar--md-accent-1 vi-scrollpane__bar--lg-accent-2 vi-scrollpane__bar--xl-inversed vi-scrollpane__bar--xxl-dominant">
      ...
    </div>
  </div>
</div>

Stylesheets #

The following stylesheet is required to display this component.

Download Scrollpane Stylesheet

JavaScript #

The following javascript is required to display this component.

Download Scrollpane JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Fix

  19 Jul 2023 - Fix Side panel, on second launch, misses content
  04 Jul 2023 - Fix peaking through of native scrollbar.
  14 Feb 2023 - Play nice with modal.


Changed

  Create space for dictated outline.
  Base color to primary color. Use modifiers --dominant, --accent-1,--accent-2 or --inversed to change the color. Also the ability to change color depending breakpoint.


Added

  23 Aug 2022 - Add offset modifiers
  PBS support
  Recalculate Method $.fn.viScrollpane('recalculate')
  Listen for dom updates, required for drilldown.
  Initial draft