Scrollbar Design

• Related Topics:
• Menubar
• Screen Background
• CSS Basics

There are 4 different options to indicate possible scrolling:

1. Default: In the default mode, scroll indicators are drawn in the middle of the menubar.
2. ScrollBar: You can activate the scrollbar mode, in which the scrollbar will be shown on the right side of the screen.
3. None: You can also deactivate the indication of possible scrolling completely.
4. scroll-up/down-background: Additionally you can use the CSS attributes scroll-down-background and scroll-up-background for showing subtle scrolling hints.

Design

Default Scroll Indicators

By default scroll arrows are painted in the menubar to indicate possible scrolling. You can specify the color or the images used for the indicators:

The example above is realized with two images and following CSS code:

.mailForm {
	padding: 5;
	padding-left: 5;
	padding-right: 5;
	background {
		type: horizontal-stripes;
		top: title;
		bottom: menubar;
		first-top-color: screenColorTop1;
		first-bottom-color: screenColorBottom1;
		second-top-color: screenColorTop2;
		second-bottom-color: screenColorBottom2;
	}
	layout: horizontal-expand | horizontal-center | top;
	//#if !polish.useScrollBar
		scrollindicator-up-image: url( arrowUp.png );
		scrollindicator-down-image: url( arrowDown.png );
	//#endif
}

Specific design attributes:

.myForm {
	scrollindicator-color: #a00;
}

ScrollBar

You can activate the ScrollBar by setting the variable "polish.useScrollBar" to "true" in your build.xml script. The scrollbar is then drawn at the right side of the screen and can operate in different modes:

• page: In the "page" mode the position and height of the currently visible area is shown relative to the complete height of that screen.
• area: In the "area" mode the slider represents the position of the current selection relativ to the complete width and height.
• item: In the "item" mode the index of currently selected item is taken into account relative to the number of items.

This example shows the ScrollBar in the default "page" scrollmode:

You can design the scrollbar by using the scrollbar CSS selector:

scrollbar {
	scrollbar-slider-color: #333;
	scrollbar-slider-width: 3;
	/* You can also define background, border, padding, etc */
}

You can also automatically hide the scrollbar so that it does not occopy screen space. The scrollbar will then be made visible each time the user scrolls on the screen:

scrollbar {
	scrollbar-slider-color: #2d2;
	scrollbar-slider-width: 6;
	scrollbar-fadeout: true;
	opacity: 80%;
	background-color: white;
}

Specific design attributes:

Deactivate Scroll Indicators

You can deactivates scroll indicators completely by setting the variable "polish.deactivateScrollIndicator" to "true" in your build.xml script.

When using the scrollbar, you can also hide the scrollbar for specific screens by using the show-scrollbar CSS attribute within the corresponding screen's style:

.screenMain {
	show-scrollbar: false;
}

Use Backgrounds as Scroll Indicators

You can use the CSS attributes scroll-down-background and scroll-up-background for showing subtle scrolling hints like in the following example:

backgrounds {
	
	rssScrollUpBg {
		type: partial-gradient;
		top-color: #2f2f2f;
		bottom-color: #ececec;
		start: 0%;
		end: 6%;
	}
	
	rssScrollDownBg {
		type: partial-gradient;
		top-color: #ececec;
		bottom-color: #2f2f2f;
		start: 94%;
		end: 100%;
	}
}	


.rssBrowserForm {
	padding-top: 3%;
	padding: 0px;
	background-color: #ececec;
	
	background-top: title;
	background-bottom: menubar;
	scroll-up-background: rssScrollUpBg;
	scroll-down-background: rssScrollDownBg;
		
	screen-change-animation: right;	
}

The scroll-up-background will be drawn over the screen's normal background when the user is able to scroll up, likewise the scroll-down-background is drawn when the user can scroll down.
If you use the fullscreen mode and you do have backgrounds for the title and / or menubar you should specify that the screen's background is painted from below the title down to the beginning of the menubar, instead from the very top to the very bottom of the screen. Realize this with background-top: title; and background-bottom: menubar;.

For the scroll background you should ensure that not the whole background area is covered by the background - in that case the screen's original background would not be visible and the scroll-down-background would cover the scroll-up-background. Also note that only parts of the scroll backgrounds are painted when only small parts can be scrolled. These backgrounds are recommended for scroll backgrounds:

• partial-gradient: paints a vertical gradient
• image: paints an image, use 'transparent' for its color
• partial: paints a simple background in a specified vertical region

Configuration

• To activate the scrollbar:

  <variable name="polish.useScrollBar" value="true" />
  

• To deactivate all scrollindicators:

  <variable name="polish.deactivateScrollIndicator" value="true" />
  

JavaDoc

ScrollBar.