Page partially static and partially scrolling

Anvil Q&A
1

What I’m trying to do:
I’d like to have the top portion of my page always remain visible, while the repeating panel section scrolls. In the image below, I’d like the area in red to be locked, so that scrolling the browser never makes it disappear, or alternatively, add a scroll bar to the repeating panel area, so only that section would scroll if the pointer was in it.

Capture
Capture1351×1105 117 KB

It’s not a new concept. I’ve seen it on other sites.

What I’ve tried and what’s not working:
I don’t even know the proper terminology for this feature, so I haven’t tried anything.

Code Sample:

# this is a formatted code snippet.
# paste your code between ```

Clone link:
share a copy of your app
https://anvil.works/build#clone:4JMBBFCIFUJ6262Z=XN23C2C4C33MKUFJYYIY3E5L

2

You’re going to want to look into CSS and assigning CSS roles to Anvil components, e.g. a column panel that all the scrollable content goes into. The scrolling itself is entirely CSS.

2 Likes
3

That’s a whole can of worms that I gave up on after a few minutes.

I found these suggestions on the ever helpful stackoverflow.com:

<div style="overflow-y: scroll; height:400px;">

and:

overflow: auto;
max-height: 100vh;

But I couldn’t figure out where to put them.

In any case, I tried throwing the stuff I wanted to be static into a column panel over on the left side, and it seems to be doing the trick.

4

This guide should help you do what you’re trying to do

1 Like