Hi there --

I'm pretty new to Processing but I could need some help for a school project. I want to load an image into Processing that acts as an index of a book. The user should be able to scroll through that index.
How can I implement scrollbars with processing?

Can anyone please help.If possible with some sample code?

Thanks, AceFace. This is perfect and almost as I like it.
The only thing is that I don't want the scrollbar to be as long as the screen. I want it to be in the middle of the screen.
How can I now limit the movement of the small, grey rect so that this can only move in between the big white rect?

Here is the code for a better understanding:
Code:

float scrollY;
PImage book; //put your image of the index here
void setup() {
  size(754,570);
   book=loadImage("demo1.jpg"); //i'm loading a test image that's taller than the height of the window
   }
   
   void draw() {
     background(255);
	image(book,0,(-book.height)*(scrollY/height));
     //draw our scrollbar
	fill(255);
	rect(width-(width/10.0-40),140,10,408);
	fill(100); 
	rect(width-(width/10.0-40),scrollY,10,45);
	//draw in our scrolled image, but move it up based on the scrollbar % (scrollY/heightofWindow)
     
	}
	//test to see if mouse is moving scroll bar, run whenever user clicks the mouse
	void mouseDragged() {
	   //if the mouse is on the last 10th of the screen horizontally
	   if(mouseX>width-width/10.0) {
		//set our scroll variable to the height of the mouse
		scrollY=mouseY;
		 }
		 }
 

Thanks again!