Perfect Scrollbar

jQuery Plugin für elegante Scrollbalken für alles. Auch mit Touch Support

Links

https://github.com/noraesae/perfect-scrollbar CSS und JS einbinden dann initialisieren:

Quickstart

processwire

JS

<script src="<?php echo $config->urls->templates?>vendors/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js"></script>

CSS

<link href="<?php echo $config->urls->templates?>vendors/perfect-scrollbar/css/perfect-scrollbar.min.css" rel="stylesheet" media="screen">

$(function() {
  $('.scrollbox').perfectScrollbar({
    suppressScrollX: true
  });
});

Doku

Benötigt

• container Element mit 'position' css style.
• normales container element.
  • PS may not work well in body, textarea, iframe or flexbox.

Basis CSS enthält:

• container must have an 'overflow: hidden' css style.
• the scrollbar's position must be 'absolute'.
• the scrollbar-x must have a 'bottom' css style, and the scrollbar-y must have a 'right' css style.

Options

Optional parameters

perfect-scrollbar supports optional parameters. handlers

It is a list of handlers to use to scroll the element. Default: ['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch'] Disabled by default: 'selection' wheelSpeed

The scroll speed applied to mousewheel event. Default: 1 wheelPropagation

If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element. Default: false swipePropagation

If this option is true, when the scroll reaches the end of the side, touch scrolling will be propagated to parent element. Default: true swipeEasing

If this option is true, swipe scrolling will be eased. Default: true minScrollbarLength

When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels. Default: null maxScrollbarLength

When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels. Default: null useBothWheelAxes

When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar. Default: false suppressScrollX

When set to true, the scroll bar in X axis will not be available, regardless of the content width. Default: false suppressScrollY

When set to true, the scroll bar in Y axis will not be available, regardless of the content height. Default: false scrollXMarginOffset

The number of pixels the content width can surpass the container width without enabling the X axis scroll bar. Allows some "wiggle room" or "offset break", so that X axis scroll bar is not enabled just because of a few pixels. Default: 0 scrollYMarginOffset

The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels. Default: 0 theme

A string. It's a class name added to the container element. The class name is prepended with ps-theme-. So default theme class name is ps-theme-default. In order to create custom themes with scss use ps-container($theme) mixin, where $theme is a scss map. Default: 'default'

Example 1:

Add theme parameter:

Ps.initialize(container, {

 theme: 'my-theme-name'

});

Create a class name prefixed with .ps-theme-. Include ps-container() mixin. It's recommended to use map-merge() to extend $ps-theme-default map with your custom styles.

.ps-theme-my-theme-name {

 @include ps-container(map-merge($ps-theme-default, (
   border-radius: 0,
   scrollbar-x-rail-height: 20px,
   scrollbar-x-height: 20px,
   scrollbar-y-rail-width: 20px,
   scrollbar-y-width: 20px
 )));

}

Example 2:

Alternatively, if you don't want to create your own themes, but only modify the default one, you could simply overwrite $ps-* variables with your own values. In this case theme parameter is not required when calling .initialize() method. Remember do define your own variables before the theme.scss file is imported. Events

perfect-scrollbar dispatches custom events. ps-scroll-y

This event fires when the y-axis is scrolled in either direction. ps-scroll-x

This event fires when the x-axis is scrolled in either direction. ps-scroll-up

This event fires when scrolling upwards. ps-scroll-down

This event fires when scrolling downwards. ps-scroll-left

This event fires when scrolling to the left. ps-scroll-right

This event fires when scrolling to the right. ps-y-reach-start

This event fires when scrolling reaches the start of the y-axis. ps-y-reach-end

This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll). ps-x-reach-start

This event fires when scrolling reaches the start of the x-axis. ps-x-reach-end

This event fires when scrolling reaches the end of the x-axis.

You can listen to these events either with vanilla JavaScript

document.addEventListener('ps-scroll-x', function () {

 // ...

})

or with jQuery

$(document).on('ps-scroll-x', function () {

 // ...

})

Tips Scrolling children inside perfect-scrollbar

Beispiele

• Schlüter und Kollegen bei Gesichter