# Desktop ScrollBar Demo

**URL:** <https://discourse.processing.org/t/desktop-scrollbar-demo/27081>\
**Category:** Gallery\
**Created:** [January 15, 2021, 11:21am UTC](https://discourse.processing.org/t/desktop-scrollbar-demo/27081 "2021-01-15T11:21:33Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mgood7123](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@mgood7123](https://discourse.processing.org/u/mgood7123)\
**Post date:** [January 15, 2021, 11:21am UTC](https://discourse.processing.org/t/desktop-scrollbar-demo/27081/1 "2021-01-15T11:21:33Z")

</div>

> **[mgood7123/Processing-3-Scrollable-View](https://github.com/mgood7123/Processing-3-Scrollable-View)**
>
> a minimal Scrollable View implementation, using Processing 3 - processing.org

this is a demo project demonstrating the implementation and usage of desktop scroll bars

```auto
NOTE:
    this is only meant to be a minimal example
    and as such, the following are NOT supported:
        buttons
        paging
        track paging
            clicking on the track, outside of the thumb
            would scroll by one page
        scroll wheel interaction

```

  
  

```auto
DONE:
scroll bar behaviour identical to desktop scroll bars
    if any differences, please notify

NOTE:
    overflow is currently disabled
        in that when scrolling past the end of content,
        the content will anchor itself to the end of
        the viewport

        NOTE:
            it is still possible to scroll past the end of content
            this happens when the viewport size is greater than
            the content size

    when overflow is enabled
        scrolling past the end of content is possible

```

  
  
the classes are modelled after Android OS to provide easier porting to Android and other operating systems (since Android OS's model is easy to follow)

this DOES NOT follow Android OS’s View Hierarchy, as such it is possible to have the viewport size being updated AFTER the scrollbar size

(however since the viewport is the window itself, it will be impossible for the viewport size to update AFTER the scrollbar size)

in this case, you can simply make a callback to the scrollbar as such

```auto

class yourView extends View {

    ScrollBarView scrollBar;

    
    @Override
    void onSizeChanged(int w, int h, int oldW, int oldH) {
        super.onSizeChanged(w, h, oldW, oldH);

        // your code here

        // scrollBar may be null
        if (scrollBar != null) {
            // this method DOES NOT exist in the ScrollBarView class
            // this assumes you have created such a method in ScrollBarView
            scrollbar.onViewportSizeChanged(w, h, oldW, oldH);
        }
    
    }

}

```

```auto
yourView content = new yourView();
ScrollBarView verticalScrollBar = new ScrollBarView(ScrollBarView.VERTICAL);

void callOnSizeChanged(View view, int w, int h) {
  view.onSizeChanged(w, h, view.getWidth(), view.getHeight());
}

void setSize(int width, int height) {
  this.width = width;
  this.height = height;

  // give the scroll bar a width of 20
  // and reduce its height by 20
  callOnSizeChanged(verticalScrollBar, 20, height - 20);
}

```

```auto
void setup() {
    content.setup(P2D);
    verticalScrollBar.setup(P2D);
    verticalScrollBar.document = content;
    content.scrollBar = verticalScrollBar;

    // assume our content will never change size
    // and only set its size once
    // 
    // we do not need to worry about
    // this being called after the scroll bar
    //
    // note that this will call
    // 
    // verticalScrollBar.onViewportSizeChanged(w, h, oldW, oldH);
    // 
    // this method DOES NOT exist in the ScrollBarView class
    // this assumes you have created such a method in ScrollBarView
    // 
    callOnSizeChanged(view, contentWidth, contentHeight);
}

```

you can find a more complete example in [Processing-3-Scrollable-View/scrollbar\_main.pde at 646d05fd4578ebaa46754816375c7abad5a10bf2 · mgood7123/Processing-3-Scrollable-View · GitHub](https://github.com/mgood7123/Processing-3-Scrollable-View/blob/646d05fd4578ebaa46754816375c7abad5a10bf2/scrollbar_main.pde)

which is only 66 lines (52 lines of code)

---

<div class="post-metadata">

**Author:** ![GWAK](https://avatars.discourse-cdn.com/v4/letter/g/13edae/32.png) [@GWAK](https://discourse.processing.org/u/GWAK)\
**Post date:** [February 19, 2022, 10:51am UTC](https://discourse.processing.org/t/desktop-scrollbar-demo/27081/2 "2022-02-19T10:51:35Z")

</div>

@mgood7123

very nice! ^^