Basescrollbar

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 1. An unconventional scrollbar

<canvas height="120" bgcolor="silver" maxtextheight="700">
  <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.

Attributes
Name	Usage	Type (Tag)	Type (JS)	Default	Category
axis	Tag only	string		y	final
	Axis may be "x" or "y", controls the orientation and default scrollattr, default: "y"

focusview	Tag & JS	expression	any	null	setter
	The view to which the scrollbar should listen for mousewheel activation events. If not set, it will be set to the scrolltarget or the immediateparent of the scrollbar, whichever is focusable

mousewheelactive	Tag & JS	boolean	Boolean	false	setter
	If true, the mousewheel is active for the focusview. read-only

mousewheelevent_off	Tag & JS	string	String	onblur	setter
	The event that deactivates the mousewhen when sent from the focusview

mousewheelevent_on	Tag & JS	string	String	onfocus	setter
	The event that activates the mousewhen when sent from the focusview

pagesize	Tag only	number		null	final
	The maximum distance to scroll, default: the height or width of the scrollbar.

scrollable	Tag & JS	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	Tag only	string			final
	The attribute of the scrolltarget that is modified by the scrollbar, default: value of axis attribute.

scrollmax	Tag only	number		null	final
	The maximum distance to scroll, default: the height or width of the scrolltarget.

scrolltarget	Tag only	expression			final
	The view that is controlled by the scrollbar.

stepsize	Tag & JS	expression	any	10	setter
	The amount that the scrolltarget is moved when the user clicks on the scrolltrack or when the step method is called, default: 10.

usemousewheel	Tag & JS	expression	any	true	setter
	If true, this scrollbar listens for mousewheel events

page()
basescrollbar.page(n)
Page(1) to page ahead, page(-1) to page back.
Parameters
Name	Type	Desc
n	Number	-1 or 1

step()
basescrollbar.step(n)
Step(1) to move ahead, step(-1) to move back.
Parameters
Name	Type	Desc
n	Number	-1 or 1

Events
Name	Description
onscrollmax	None

<basescrollbar>

Methods