pixi-scrollbox

Class: Scrollbox

Scrollbox

pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars

new Scrollbox (options)

scrollbox.js:29

create a scrollbox

Name Type Description
options object
Name Type Default Description
dragScroll boolean true optional

user may drag the content area to scroll content
overflowX string auto optional

(none, scroll, hidden, auto) this changes whether the scrollbar is shown
overflowY string auto optional

(none, scroll, hidden, auto) this changes whether the scrollbar is shown
overflow string optional

(none, scroll, hidden, auto) sets overflowX and overflowY to this value
boxWidth number 100 optional

width of scrollbox including scrollbar (in pixels)
boxHeight number 100 optional

height of scrollbox including scrollbar (in pixels)
scrollbarSize number 10 optional

size of scrollbar (in pixels)
scrollbarOffsetHorizontal number 0 optional

offset of horizontal scrollbar (in pixels)
scrollbarOffsetVertical number 0 optional

offset of vertical scrollbar (in pixels)
stopPropagation boolean true optional

call stopPropagation on any events that impact scrollbox
scrollbarBackground number 0xdddddd optional

background color of scrollbar
scrollbarBackgroundAlpha number 1 optional

alpha of background of scrollbar
scrollbarForeground number 0x888888 optional

foreground color of scrollbar
scrollbarForegroundAlpha number 1 optional

alpha of foreground of scrollbar
underflow string top-left optional

what to do when content underflows the scrollbox size: none: do nothing; (left/right/center AND top/bottom/center); OR center (e.g., 'top-left', 'center', 'none', 'bottomright')
noTicker boolean optional

do not use PIXI.Ticker (for fade to work properly you will need to manually call updateLoop(elapsed) on each frame)
ticker PIXI.Ticker PIXI.Ticker.shared optional

use this PIXI.Ticker for updates
fade boolean optional

fade the scrollbar when not in use
fadeScrollbarTime number 1000 optional

time to fade scrollbar if options.fade is set
fadeScrollboxWait number 3000 optional

time to wait before fading the scrollbar if options.fade is set
fadeScrollboxEase string | function easeInOutSine optional

easing function to use for fading
passiveWheel boolean false optional

whether wheel events are propogated beyond the scrollbox (NOTE: default is now false)
clampWheel boolean true optional

wheel events should be clamped (to avoid weird bounce with mouse wheel)
interaction PIXI.InteractionManager optional

InteractionManager, available from instantiated PIXI.Renderer.plugins.interaction - used to calculate pointer postion relative to canvas location on screen
divWheel HTMLElement optional

the HTMLElement to use for wheel interactions

Classes

Scrollbox

Members

boxHeight number

height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box

boxWidth number

width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box

content Viewport

content in placed in here you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)

contentHeight number readonly

height of scrollbox less the scrollbar (if visible)

contentWidth number readonly

width of scrollbox less the scrollbar (if visible)

dirty boolean

dirty value (used for optimizing draws) for underlying viewport (scrollbox.content)

disable boolean

disable the scrollbox (if set to true this will also remove the mask)

dragScroll boolean

user may drag the content area to scroll content

isScrollbarHorizontal boolean readonly

is the horizontal scrollbar visible

isScrollbarVertical boolean readonly

is the vertical scrollbar visible

overflow string

sets overflowX and overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown scroll = always show scrollbar hidden = hide overflow and do not show scrollbar auto = if content is larger than box size, then show scrollbar

overflowX string

sets overflowX to (scroll, hidden, auto) changing whether the scrollbar is shown scroll = always show scrollbar hidden = hide overflow and do not show scrollbar auto = if content is larger than box size, then show scrollbar

overflowY string

sets overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown scroll = always show scrollbar hidden = hide overflow and do not show scrollbar auto = if content is larger than box size, then show scrollbar

scrollbar PIXI.Graphics

graphics element for drawing the scrollbars

scrollbarOffsetHorizontal number

offset of horizontal scrollbar (in pixels)

scrollbarOffsetVertical number

offset of vertical scrollbar (in pixels)

scrollbarSize number

scrollbar size in pixels

scrollHeight

height of content area if not set then it uses content.height to calculate height

scrollLeft

left coordinate of scrollbar

scrollTop

top coordinate of scrollbar

scrollWidth

width of content area if not set then it uses content.width to calculate width

stopPropagation boolean

call stopPropagation on any events that impact scrollbox

Methods

activateFade ()

scrollbox.js:480

show the scrollbar and restart the timer for fade if options.fade is set

ensureVisible (x, y, width, height)

scrollbox.js:603

ensure that the bounding box is visible

Name Type Description
x number

relative to content's coordinate system
y number
width number
height number

resize (options)

scrollbox.js:583

resize the mask for the container

Name Type Description
options object
Name Type Description
boxWidth number optional

width of scrollbox including scrollbar (in pixels)
boxHeight number optional

height of scrollbox including scrollbar (in pixels)
scrollWidth number optional

set the width of the inside of the scrollbox (leave null to use content.width)
scrollHeight number optional

set the height of the inside of the scrollbox (leave null to use content.height)

update ()

scrollbox.js:423

call when scrollbox content changes

updateLoop (elapsed)

scrollbox.js:443

called on each frame to update fade scrollbars (if enabled)

Name Type Description
elapsed number

since last frame in milliseconds (usually capped at 16.6667)