<basescrollbar>
Provides non-visual aspects of scrollbar.

JavaScript: lz.basescrollbar
extends <basecomponent> » <view> » <node> » lz.Eventable »

If you want to create a scrollbar with a custom look, you can use basescrollbar along with helper classes basescrolltrack, basescrollthumb, and basescrollarrow. These classes will allow you to change resources, colors, and the position or presence of various elements.

Example 37. An unconventional scrollbar

<canvas height="120" bgcolor="silver">
              <class name="myscrollbar" extends="basescrollbar" width="20">
                <view name="scrolltrack" width="100%" options="releasetolayout">
                  <basescrolltrack x="5" direction="-1" width="${parent.width-10}" height="${parent.thumb.y}" bgcolor="yellow"/>
                  <basescrollthumb name="thumb" x="1" width="${parent.width-2}" bgcolor="green"/>
                  <basescrolltrack x="5" direction="1" y="${parent.thumb.y+parent.thumb.height}" width="${parent.width-10}" height="${parent.height - parent.thumb.y - parent.thumb.height}" bgcolor="yellow"/>
                </view>
            
                <basescrollarrow direction="-1" x="2" bgcolor="yellow">
                    <text>up</text>
                    </basescrollarrow>
            
                <basescrollarrow direction="1" x="2" bgcolor="yellow">
                  <text>dn</text>
                  </basescrollarrow>
                <resizelayout spacing="4"/>
              </class>
            
              <view x="10" y="10" bgcolor="white" width="200" height="100" clip="true">
                <text multiline="true" width="180">
                  Man through his scientific genius has been able to draw distance and
                  save time and space. He has been able to carry highways through the
                  stratosphere. We read just the other day that a rocket plane went 1900
                  miles in one hour. Twice as fast as the speed of sound. This is the
                  new age. Bob Hope has described this new age, this jet age; it is an
                  age in which planes will be moving so fast that we will have a
                  non-stop flight from New York to Los Angeles, when you start out you
                  might develop the hiccups and you will hic in New York and cup in Los
                  Angeles. This is an age in which it will be possible to leave Tokyo on
                  a Sunday morning and arrive in Seattle, Washington on the preceding
                  Saturday night. When your friends meet you at the airport and ask what
                  time did you leave Tokyo, you will have to say I left tomorrow. That
                  is this new age.  We live in one world geographically. We face the
                  great problem of making it one spiritually.
                  <br/>
                  Through our scientific means we have made of the world a
                  neighborhood and now the challenge confronts us through our
                  moral and spiritual means to make of it a brotherhood. We must
                  live together, we are not independent we are interdependent. We
                  are all involved in a single process. Whatever affects one
                  directly affects all indirectly for we are tied together in a
                  single progress. We are all linked in the great chain of
                  humanity.
                  <br/>
                  Martin Luther King, Jr.
                  <br/>
                  11 August 1956
                </text>
                <myscrollbar/>
              </view>
            </canvas>

Scrollbar arrows are optional or may be placed anywhere within the scrollbar. The thumb and track elements expect to be inside a view named scrolltrack. It may seem odd that the scrolltrack is placed twice, but this allows a more flexible appearance as well as particular behaviors that you may want to trigger differently when the user clicks the track to scroll up or down.

For another example of using basescrollbar, you can look at lps/components/lz/scrollbar.lzx to see the code for the lz scrollbar class. An easy way to make your own scrollbar is to copy that file and replace resources and modify attributes or views to suit your design goals.

Contains non-visual aspects of a scrollbar. Subclasses are expected to define this.thumb and this.scrolltrack to reference the views that perform those functions.

Attributes

Name (CSS property) Type (tag) Type (js) Default Category
axis string String y initialize-only
  Axis may be "x" or "y", controls the orientation and default scrollattr
focusview expression any null read/write
  The view to which the scrollbar should listen for focus events. If not set, it will be set to the scrolltarget or the immediateparent of the scrollbar, whichever is focusable
mousewheelactive boolean boolean false readonly
  If true, the mousewheel is active for the focusview.
mousewheelevent_off string String onblur read/write
  The event that deactivates the mousewhen when sent from the focusview
mousewheelevent_on string String onfocus read/write
  The event that activates the mousewhen when sent from the focusview
pagesize number Number null initialize-only
  The maximum distance to scroll, default: the height or width of the scrollbar.
scrollable expression any true readonly
  True if the scrolltarget is bigger than the containing view therefore the scrollbar is active. The scrollbar appears disabled when scrollable is false. You can make the scrollbar invisible when there is nothing to scroll by setting visible="${scrollable}"
scrollattr string String   initialize-only
  The attribute of the scrolltarget that is modified by the scrollbar, default: value of axis attribute.
scrollmax number Number null read/write
  The maximum distance to scroll, default: the height or width of the scrolltarget.
scrolltarget expression any null initialize-only
  The view that is controlled by the scrollbar.
stepsize expression any 10 read/write
  The amount that the scrolltarget is moved when the user clicks on the scrolltrack or when the step method is called.
usemousewheel expression any true read/write
  If true, this scrollbar listens for mousewheel events

Methods

page()
basescrollbar.page(n : Number);
Page(1) to page ahead, page(-1) to page back.
Parameter Name Type Description
n Number -1 or 1

step()
basescrollbar.step(n : Number);
Step(1) to move ahead, step(-1) to move back.
Parameter Name Type Description
n Number -1 or 1

Methods inherited from lz.Eventable

destroy, setAttribute

Events

Name Description
onscrollmax  

Events inherited from <node>

onconstruct, ondata, oninit

Events inherited from lz.Eventable

ondestroy