# Smooth scrolling list control with ContainerControls **URL:** \ **Category:** Extras\ **Created:** [May 21, 2021, 6:00pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489 "2021-05-21T18:00:35Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![Christian\_Schmitz](https://forum.xojo.com/user_avatar/forum.xojo.com/christian_schmitz/32/158_2.png) [@Christian\_Schmitz](https://forum.xojo.com/u/Christian_Schmitz)\ **Post date:** [May 21, 2021, 6:00pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/1 "2021-05-21T18:00:35Z")
Recently I implemented [NSCollectionViewControlMBS](https://www.monkeybreadsoftware.net/control-nscollectionviewcontrolmbs.shtml) control for Xojo to have a grid of items based on container controls. But a few days ago we had the need for having just a few containers to scroll on a window in Xojo. You may start to implement this in Xojo with a scrollbar and then move in the ValueChanged the containers up/down as needed. Quickly you may realize you need a wrapping container to clip the scrolling ones properly. But if you loop over containers and change their Top property to move them around, you may quickly see the scrolling not be smooth. We needed something better. ![](https://forum.xojo.com/uploads/default/original/2X/8/86d5757d5b437268f23a2c53c2b1a9d6603fbb05.jpeg) Since macOS comes with a [NSScrollView](https://developer.apple.com/documentation/appkit/nsscrollview) class, I wanted to use that to push the job of scrolling and redrawing to the OS itself. So we have a Xojo managed inner and outer ContainerControl and slide our [NSScrollViewMBS](https://www.monkeybreadsoftware.net/class-nsscrollviewmbs.shtml) object between. We put all item containers on the inner ContainerControl, so Xojo may not know about the scrolling and just sees a big container in a smaller one. We configure the scroll view with a vertical scrollbar, some bezel around and a reasonable page scroll value. When we try this setup, we can scroll smoothly and with mouse wheel support. We get the elastic scrolling with bouncing on the ends (can be disabled). This is fantastic and very smooth. You may ask about Windows and Linux. Well, this may also be doable, but then with a regular Scrollbar itself. It may be tricky to get the redraw stuff smooth and avoid flicker. But well, I made an example for that, too. Tested on Windows and seems to work mostly with scrollbar controls. Since we only move the inner container up and down and let the container do clipping, it seems to work well with not much flicker. And once I had that, I merged the two examples into one. Please try it soon as part of the examples coming with [MBS Xojo Plugins](https://www.monkeybreadsoftware.de/xojo/) in version 21.2 or later. If you have feedback and improvements, feel free to send them back to us, so we can merge your changes into our example. ---
**Author:** ![Beatrix\_Willius](https://forum.xojo.com/user_avatar/forum.xojo.com/beatrix_willius/32/282_2.png) [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\ **Post date:** [May 22, 2021, 11:38am UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/2 "2021-05-22T11:38:36Z")
Stupid question: what is the name of the example? ---
**Author:** ![Christian\_Schmitz](https://forum.xojo.com/user_avatar/forum.xojo.com/christian_schmitz/32/158_2.png) [@Christian\_Schmitz](https://forum.xojo.com/u/Christian_Schmitz)\ **Post date:** [May 22, 2021, 11:42am UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/3 "2021-05-22T11:42:19Z")
[/MacControls/ContainerControl List](https://www.monkeybreadsoftware.net/example-maccontrols-containercontrollist.shtml) ---
**Author:** ![Beatrix\_Willius](https://forum.xojo.com/user_avatar/forum.xojo.com/beatrix_willius/32/282_2.png) [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\ **Post date:** [May 22, 2021, 12:47pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/4 "2021-05-22T12:47:25Z")
The scrollbar looks pretty weird. Normal scrolling: ![Screenshot 2021-05-22 at 14.44.25](https://forum.xojo.com/uploads/default/original/2X/7/7b8d44c6a8e890cbb21626085dab733b8a3e6d5b.jpeg) Now I mouse over the scrollbar: ![Screenshot 2021-05-22 at 14.44.17](https://forum.xojo.com/uploads/default/original/2X/8/84ade56ff2cd189b783a3dde7d1bdc9d7be1f893.jpeg) Why do you use the following code with the width of the scrollbar: `innerContainer.EmbedWithin(Self, 0, 0, Me.Width - VScrollBar.width, Me.Height)` Thanks to Apple’s insane invisible-until-used scrollbars they usually don’t have any width. ---
**Author:** ![Christian\_Schmitz](https://forum.xojo.com/user_avatar/forum.xojo.com/christian_schmitz/32/158_2.png) [@Christian\_Schmitz](https://forum.xojo.com/u/Christian_Schmitz)\ **Post date:** [May 22, 2021, 12:57pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/5 "2021-05-22T12:57:00Z")
Feel free to change it. The scrollbar should be visible always in my opinion, but maybe I forgot to configure that. ---
**Author:** ![Beatrix\_Willius](https://forum.xojo.com/user_avatar/forum.xojo.com/beatrix_willius/32/282_2.png) [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\ **Post date:** [May 22, 2021, 1:20pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/6 "2021-05-22T13:20:59Z")
I removed the “- VScrollBar.width” and the VScrollbar completely. However, the scrollbar still has the odd behaviour. I also think that the scrollbar should be always visible. But it isn’t. Can you fix the scrollbar behaviour? ---
**Author:** ![Christian\_Schmitz](https://forum.xojo.com/user_avatar/forum.xojo.com/christian_schmitz/32/158_2.png) [@Christian\_Schmitz](https://forum.xojo.com/u/Christian_Schmitz)\ **Post date:** [May 22, 2021, 1:43pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/7 "2021-05-22T13:43:38Z")
VScrollBar is for windows. In Open event, you can change `innerContainer.EmbedWithin(Self, 0, 0, Me.Width - VScrollBar.width, Me.Height)` to this to reduce the right spacing: `innerContainer.EmbedWithin(Self, 0, 0, Me.Width, Me.Height)` and for the scrollbar to be permanent, we need this: `ScrollView.verticalScroller.scrollerStyle = NSScrollerMBS.NSScrollerStyleLegacy` ---
**Author:** ![Beatrix\_Willius](https://forum.xojo.com/user_avatar/forum.xojo.com/beatrix_willius/32/282_2.png) [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\ **Post date:** [May 22, 2021, 1:58pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/8 "2021-05-22T13:58:12Z")
> [@Christian\_Schmitz](#): > > and for the scrollbar to be permanent, we need this: > > `Preformatted text`ScrollView.verticalScroller.scrollerStyle = NSScrollerMBS.NSScrollerStyleLegacy I’ve already removed VScrollbar. I don’t want the legacy style. Instead I want the modern scrollbar all over. How do I achieve this? ---
**Author:** ![Christian\_Schmitz](https://forum.xojo.com/user_avatar/forum.xojo.com/christian_schmitz/32/158_2.png) [@Christian\_Schmitz](https://forum.xojo.com/u/Christian_Schmitz)\ **Post date:** [May 22, 2021, 2:12pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/9 "2021-05-22T14:12:21Z")
Don’t set the legacy style. And change the `Me.Width - VScrollBar.width` to `Me.Width` for the width. ---
**Author:** ![Beatrix\_Willius](https://forum.xojo.com/user_avatar/forum.xojo.com/beatrix_willius/32/282_2.png) [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\ **Post date:** [May 22, 2021, 2:36pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/10 "2021-05-22T14:36:45Z")
> [@Christian\_Schmitz](#): > > And change the `Me.Width - VScrollBar.width` to `Me.Width` for the width. Ich habe das schon gemacht. Aber die Scrollbar sieht immer noch suboptimal aus, wenn ich drübergehe. Wie bekomme ich das weg? ---
**Author:** ![Christian\_Schmitz](https://forum.xojo.com/user_avatar/forum.xojo.com/christian_schmitz/32/158_2.png) [@Christian\_Schmitz](https://forum.xojo.com/u/Christian_Schmitz)\ **Post date:** [May 22, 2021, 4:58pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/11 "2021-05-22T16:58:59Z")
I may not know the answer. ---
**Author:** ![Beatrix\_Willius](https://forum.xojo.com/user_avatar/forum.xojo.com/beatrix_willius/32/282_2.png) [@Beatrix\_Willius](https://forum.xojo.com/u/Beatrix_Willius)\ **Post date:** [May 22, 2021, 5:30pm UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/12 "2021-05-22T17:30:52Z")
Too bad. As the example is now it’s not usable on macOS. ---
**Author:** ![Brian\_O\_Brien](https://forum.xojo.com/user_avatar/forum.xojo.com/brian_o_brien/32/20096_2.png) [@Brian\_O\_Brien](https://forum.xojo.com/u/Brian_O_Brien)\ **Post date:** [July 27, 2024, 12:35am UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/13 "2024-07-27T00:35:30Z")
Is there a project i can download here? ---
**Author:** ![Christian\_Schmitz](https://forum.xojo.com/user_avatar/forum.xojo.com/christian_schmitz/32/158_2.png) [@Christian\_Schmitz](https://forum.xojo.com/u/Christian_Schmitz)\ **Post date:** [July 27, 2024, 7:44am UTC](https://forum.xojo.com/t/smooth-scrolling-list-control-with-containercontrols/63489/14 "2024-07-27T07:44:54Z")
It’s included with MBS Plugins download. See - ContainerControl List - Use Scrollview with ContainerControl - NSCollectionView Test