Scroll element inside a scaled down parent

Hi, I’m dealing with scaling elements and am perceiving a strange behavior. I’m using the non-native scroll in this case.

If a parent node uses ‘scale’ (it’s scaled down to appear smaller), does a ‘scroll’ node child of that parent take that into consideration the scaling for the scroll interaction?

I feel like the scroll bounding box is OK, but the interaction itself - how much I need to move my finger or mouse to scroll is still working in an unscaled manner.

If I have a scroll element which is the size of the parent (100% height of parent), and that parent is then scaled to 0.4. Dragging a page in the scroll child component full height 100% only moves the content around 40% (making me think the scroll - specifically drag with mouse / finger) doesn’t respect the scaling factor, somewhere in the math. The drag distance is still the original (unscaled amount).

Furthermore, is there a way to have a non-native scroll inside a non-native scroll… for some reason it doesn’t want to work. I’m trying different sizes for the child scroll box, but it just scrolls the parent scroll group?

Hi Regi. Thank you for posting your question here on the forum also! I’ll ask around with the rest of the Noodl Team, and get back to you when I know more :slight_smile:

Best Regards,
Victor, Design Technologist at Noodl

Like you suspected, scolling doesn’t take scaling into consideration. Native scrolling might work a bit better here, but you’re hitting the limits of the non-native scroll here.

However, nested non-native scroll should work fine. If scrolling in the child group is scrolling the parent, that’s usually an indication that the child scroll group has reached it’s start/end position. I.e. there’s nothing more to scroll, or the scroll group is larger than its children.

Here’s an example of nested non-native scrolls (with clipping enabled on all of them)

Thanks! Good to know. Is the scaled scroll something that one could ‘fix’ without delving into the internals of Noodl? Or is it kind of the way that it is and it’s best to look for another solution?