Dynamic height: scrolling an element of unknown height into/out of view
I have a page for mobile that should dynamically adjust to the users device. There is a box that I'd like to have outside of the default view and that should scroll the entire page down when coming into view.
How can I best approach this problem?
One thought is that the entire content could be wrapped and then shifted up/down the height of the afore mentioned box. But that requires the parent to "know" the dynamically set height of a child, which seems bad/ impossible?
I am still very much learning and all comments and tips are very welcome!
19 Replies
How does your box come into view?
On one hand I get the feeling you want an endlesscroll on the other I think you want horizontal scroll and on end scroll vertical to the next part?
In any case
intersectionObserver may be the term, that you are looking for.that scrolling happens by physically scrolling or on a button click?
i think you want scroll-snap with dvh/lvh for the height
I'm using react for this, but basically I'm loading a google map that fills width and has a height set by aspect ratio 1:2. My solution now is kinda hacky and based on using vw. So it's calculating how much to scroll based on 100vw/2
scroll happens when clicking a UI button that lives outside the container, so that works fine
also using translateY to shift everything up and down
I mean it works but I don't feel good about using vw for this
why not put a with href to the id of that box
as a button that is
it's a single page app, so I'm not intending there to be much need for scrolling inherently. I want the map as an option. I had it as an overlay but I like it better when everything shifts down so the map doesn't cover anything. If I understand your idea it's based on everything using scrolling and then starting with map scrolled off screen? If so, how do you set the initial view?
no, you should achive the same result that you posted in your gif. no need to transform, on button press the box will scroll in to view just like on your gif
how do you scroll it out of view then?
sorry if I'm being stupid here 😅
that is a good question
i guess you would need another button that takes you to the top
is there some javascript thing maybe one could do 🤔
or you could change the href to another id that is on the map with js
on click
yeah I see what you're saying. this seems like a much simpler and robust idea, thanks
it's kinda difficult to implement in my react app but your pen is working fine. What exactly does dvh units do?
it makes sure that the element covers full height of the viewport