How to make a scrollable panel in LockPlus

Before I go into more detail the TLDR is add overflow:scroll to a panel, anything outside the panel will be hidden. When you drag with your finger on the panel (in LockPlus not creator) it will scroll to show the hidden information.

Before I begin to explain the process I use to make these, two examples of this is SlideUp (lockscreen theme) and SliderSB (springboard theme) both can be downloaded in LockPlus. All LockPlus themes are free btw.

To make a scrollable panel I first decide what I want in the panel. This is important as once you put the items in a panel and enable overflow -> scroll the information outside (that is to be scrolled) is invisible. You cannot scroll these panels in the Creator as the creator uses a drag function to move elements, so this must be tested in LockPlus main view.

In the case of SliderSB I wanted 3 panels that were side by side. Only 2 panels showed and the other can be shown by scrolling. You see 4 boxes above though. The fourth box was used for the end spacing to leave a gap at the end of the last element. It is made invisible.

I fully make the panels before adding them to a main panel which will hide and scroll them. I make them completely first, so I can see everything needed and nothing is hidden.

I then add all the separate panels to one single panel. This is where I align them side by side horizontally. You can see here that the last panel is still visible. This is before I applied the overflow -> scroll.

This is the overflow setting. Once you apply this on the panel anything outside it's width (or height) will be invisible. If this is loaded in LockPlus then you can scroll to see the hidden information.

With overflow scroll set, it will now look like this when you go to scroll it. As you see there is a big bar at the bottom. This is iOS giving user feedback that you can scroll it to see other info. I don't like scrollbars on iOS though in cases like this. One reason is they can't be styled through css like every other thing in an html. Apple takes control of this one, while certain firmware allow you to style scrollbars iOS is a pain when it comes to this.

You will notice on the the two themes I mentioned there is no scrollbars, how did I achieve this. Well I leveraged the overflow property to hide the scrollbar. So we have a panel that has overflow:scroll set to it. This panel scrolls but always shows a scrollbar below it. Since the scrollbar is below it (or beside, if scrolling vertical) we can hide it by adding it to another panel.

I take the scrollable panel and put it in another panel, the panel I put it in has overflow:hidden meaning everything outside it's width and height will be hidden. I make the height or width smaller than where the scrollbar is positioned, therefore hiding the scrollbar.

One important thing to consider

You cannot make full screen scrollable panels. If you look at SlideUp you slide the lower portion of the screen to show the forecast below it. The panel that controls this is only half the size of the screen. The lower part to be specific. If you have a scrolling element when it's being scrolled it will grab all touches. Meaning if you have a full screen scrollable panel, you will not be able to open the LockPlus menu because you have something else grabbing all touches. This is why I purposely made it half the side of the screen. The upper part of the screen can still be used to open the LockPlus menu. You can give this a test and see more of what i'm referring to. You cannot open the LockPlus menu by swiping over the scrollable panel.

I will like to point out the importance of naming your panels. As you see we have a lot of panels going on here and we need to know what panels do what. You can name panels in the creator by using the custom name option in the styles menu. I suggest downloading SliderSB going to placedElements and looking at the panels placed. This may give you a better understanding on what's going on.

Panels are amazing and I think one of the biggest improvements to LockPlus by far. They are little containers that hold information in groups. If I want to move all info down a little I only need to move 3 panels and not 12+ elements or maybe move the main panel and only have to move 1 item. If I want to animate something I can animate a panel instead of a bunch of different elements.

I hope I explained this in a way others can understand. If you have any questions about what's been discussed here feel free to add them to the chat below.

Thanks.