Height transition scrolling problem

How can I fix this? Minimal example: https://jsfiddle.net/CodearELM/78x6voy0/

Move the slider and the element will increase in height. The page will stay scrolled to the bottom like I want it to. Now uncomment the transition:

.child {
  width: 100px;
  background-color: lightskyblue;
  /* transition: height 0.5s; <------------- UNCOMMENT */ 

And try it again. It fails. If I add a 500ms timeout to the code that scrolls to the bottom it works but of course that’s jumpy and ugly.

heightControl.addEventListener("input", e => {
child.style.height = `${200 * parseInt(e.target.value) + 500}px`; 
heightControl.scrollIntoView();  //<-- scrolls to the height control element (bottom of page)

Remove transition: height 0.5s
you could make use of scrollIntoView(); parameters.

Solution code:

heightControl.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

I haven’t tried it but I don’t see how that would work as I need transition for when it’s not overflowing. I guess I could detect overflow and remove transition when needed but I don’t know if that’s a good idea.

Actually, what would be the point of this at all? The problem only occurs when there’s a transition. Without, it works fine as I mentioned.

Not sure I understand the use case, so any given solution might not work without more context.

But you can try using position: sticky.

.child {
  position: sticky;
  bottom: 0;
  width: 100px;
  background-color: lightskyblue;
  transition: height 0.5s;

I updated the sandbox.


How can I make it work in this one? I need the scroll position to remain the same as I move the slider.

I still don’t really get it. Can you please make this a little less abstract? What is the actual use case here? Please post an example of something you are trying to use this for.

Without knowing more, I might also suggest you look at using transform instead of height.

I don’t know why the use case is so important. I just need it to work in the sandbox. That’s why I made it. It keeps things simple. I need the middle content height to change as the slider is moved. But the issue is that the bottom of the middle content moves up and down, it should stay still. I get that’s just regular browser behavior. I’m trying to come up with a solution.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.