A scrollbar manipulates the x or y position of a target view that is clipped by its parent, creating a scrolling effect when the user clicks up/down arrows, clicks on the scroll track or drags the thumb.
This tag creates a horizontal scrollbar. If you do not specify a
scrolltarget the scrollbar will automatically
be aligned to the bottom and size its width to its parent's width. It
is expected that the parent view be smaller than the scrolltarget and
set clip=true. The scrolling effect is produced by moving
the scrolltarget while its visible region is clipped by the parent
view.
If you would like the target view to start scrolled, simply set its
x position to a negative number. For example, x=-10 will
cause the view to be scrolled 10 pixels.
![[Note]](images/note.png) |
Note |
|---|---|
If you have no vertical scrollbars in your application, using
the <hscrollbar> tag will make the applications
slightly smaller than if you were to use <scrollbar
axis="x">.
|
Example 58. Simple scrollbar
<canvas height="100">
<view name="main" width="100" height="90" clip="true">
<view name="contents">
<text width="200" height="70" multiline="true">
Remember not only to say the right thing in the right place,
but far more difficult still, to leave unsaid the wrong thing
at the tempting moment.
-- Benjamin Franklin
</text>
</view>
<hscrollbar/>
</view>
</canvas>
In the example above, the scrolltarget is the 'contents' view. A
scrollbar moves its scrolltarget along its
axis. The attribute that is controlled by the scrollbar may be
specified as the scrollattr, overriding the
default value of x or y.
| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
disabledbgcolor
|
expression | any | null | read/write |
| If this is defined, it will be used as the scrollbar's background color when it is disabled. If not provided, the scrollbar will use the bgcolor of its closest parent that has a bgcolor defined. | ||||
height
|
expression | any | 14 | read/write |
Attributes inherited from <basescrollbar>
axis, focusview, mousewheelactive, mousewheelevent_off, mousewheelevent_on, pagesize, scrollable, scrollattr, scrollmax, scrolltarget, stepsize, usemousewheel
Attributes inherited from <basecomponent>
doesenter, enabled, hasdefault, isdefault, style, styleable, text
Attributes inherited from <view>
aaactive, aadescription, aaname, aasilent, aatabindex, align, backgroundrepeat, bgcolor, cachebitmap, capabilities, clickable, clickregion, clip, colortransform, context, contextmenu, cornerradius, cursor, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hasdirectionallayout, hassetheight, hassetwidth, height, layout, loadratio, mask, opacity, pixellock, playing, proxyurl, resource, resourceheight, resourcewidth, rotation, shadowangle, shadowblurradius, shadowcolor, shadowdistance, showhandcursor, source, stretches, subviews, tintcolor, totalframes, unstretchedheight, unstretchedwidth, usegetbounds, valign, visibility, visible, width, x, xoffset, xscale, y, yoffset, yscale
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
Methods inherited from <basecomponent>
acceptValue, doEnterDown, doEnterUp, doSpaceDown, doSpaceUp, presentValue, setStyle, setTint, updateDefault
Methods inherited from <view>
bringToFront, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getCurrentTime, getDepthList, getDisplayObject, getID3, getMouse, getNextSelection, getPan, getPrevSelection, getProxyURL, getTotalTime, getVolume, init, isBehind, isInFrontOf, isMouseOver, measureHeight, measureWidth, play, proxyurl, searchSubviews, seek, sendAAEvent, sendBehind, sendInFrontOf, sendToBack, setAccessible, setAttributeRelative, setColor, setColorTransform, setPan, setProxyPolicy, setSource, setVolume, shouldYieldFocus, stop, unload, updateResourceSize
Methods inherited from <node>
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Events
Events inherited from <view>
onaddsubview, onbackgroundrepeat, onblur, onclick, onclickable, onclip, oncontext, oncornerradius, ondblclick, onerror, onfocus, onframe, onframesloadratio, ongesture, onheight, onkeydown, onkeyup, onlastframe, onload, onloadratio, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmousetrackout, onmousetrackover, onmousetrackup, onmouseup, onmouseupoutside, onopacity, onplay, onplaying, onremovesubview, onshadowangle, onshadowblurradius, onshadowcolor, onshadowdistance, onstop, ontimeout, ontouch, onvisible, onwidth, onx, ony