# Perfect Scrollbar - 滚动条

Perfect Scrollbar

# 默认封装

在 EApp 中默认初始化了 [data-scroll="true"], .e-scrollable 的select（在EApp.initComponents里初始化的），如需手动初始化可使用以下方式

/**
 * 初始化示例 
 */
EUtil.scrollInit(document.getElementById('id'), {
    height: 260, // 高度
    mobileNativeScroll: true, // 移动端不使用此插件
    handleWindowResize: true, // 当窗口大小改变后重新初始化
    rememberPosition: false // 记住滚动位置
});
/**
 * 更新滚动条
 *
 * @param element {object} html element
 */
EUtil.scrollUpdate(element);
/**
 * 更新滚动条
 *
 * @param selector {string} 要更新滚动条所在父元素选择器
 */
EUtil.scrollUpdateAll(selector);
/**
 * 销毁滚动条
 *
 * @param element {object} html element
 */
EUtil.scrollDestroy(element);

# 自定义

引入css并设置目标元素大小

<link rel="stylesheet" href="css/perfect-scrollbar.css">
<style>
  #container {
    position: relative;
    width: 600px;
    height: 400px;
  }
</style>

引入js

<script src="dist/perfect-scrollbar.js"></script>

初始化

var ps = new PerfectScrollbar('#container', {
  wheelSpeed: 2,
  wheelPropagation: true,
  minScrollbarLength: 20
});

当内容发生改变时更新滚动条

ps.update();

销毁

ps.destroy();
ps = null; // to make sure garbages are collected

滚动到指定位置

const container = document.querySelector('#container');
container.scrollTop = 0;

# Options

# handlers {String[]}

It is a list of handlers to scroll the element.

Default: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']

# wheelSpeed {Number}

The scroll speed applied to mousewheel event.

Default: 1

# wheelPropagation {Boolean}

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

Default: false

# swipeEasing {Boolean}

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

Default: true

# minScrollbarLength {Number?}

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

Default: null

# maxScrollbarLength {Number?}

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

Default: null

# scrollingThreshold {Number}

This sets threashold for ps--scrolling-x and ps--scrolling-y classes to remain. In the default CSS, they make scrollbars shown regardless of hover state. The unit is millisecond.

Default: 1000

# useBothWheelAxes {Boolean}

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 {Boolean}

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

Default: false

# suppressScrollY {Boolean}

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

Default: false

# scrollXMarginOffset {Number}

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 {Number}

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

# Events

perfect-scrollbar dispatches custom events.

container.addEventListener('ps-scroll-x', () => ...);

# 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 also watch the reach state via the reach property.

const ps = new PerfectScrollbar(...);

console.log(ps.reach.x); // => 'start' or 'end' or null
console.log(ps.reach.y); // => 'start' or 'end' or null

• 其他需求请参照官方文档