Support "stretching"

[atomiks]

Stretching refers to being able to "stretch" the overflow when continuing to scroll up/down when already at the top/bottom of the container, which is part of the native implementation. This might be quite tricky to implement though.

[atomiks]

I'm pretty sure it's impossible (to do well).

My current idea involves using a cumulative delta (with dampening, so that the more they stretch the harder it is to continue stretching) onWheel when they're at the top or bottom so it continues to add up.

But the native implementation transitions back down when they let go of the trackpad which I don't think there's an API for... for touch devices there's touchend to know when they let go of the screen. As soon as they stop scrolling (intertial or not), it will transition back down.

The only thing I thought of was to use a timeout, which I tried. But that doesn't replicate the native feel and feels bad / kinda glitchy based on what I've tried, so I'd rather leave it out.

😓

[atomiks]

I think it's impossible. If anyone wants to have a crack at it, feel free

[aeharding]

I was thinking about this (see referenced issues ^) and I think I have a combination of API proposals that could help.

Stretching when NOT momentum scrolling

scrollend (when overscroll-behavior: contain; is set) properly fires when fingers are lifted during overscroll (and no/little movement).

This would allow stretching to work great when momentum scrolling is not occurring.

Here's a really primitive example/hack of the scrollend event triggering when finger(s) are lifted:

https://imgur.com/a/dxPWSdt

scrollend can be enabled in Chrome's stable build today, by going to chrome://flags and enabling "Experimental Web Platform Features".

Stretching when momentum scrolling

The only hairball is momentum scrolling. When momentum (over)scrolling, scrollend doesn't fire until after momentum based scrolling finishes.

And the problem is, on the web, there's no way to differentiate a synthetic wheel event (momentum) from a user created one (fingers moving on trackpad).

A potential solution: something like WheelEvent().isInertialScrolling added to the wheel event to differentiate a synthetic momentum based wheel event from a user explicit wheel event could fix this.

WheelEvent().isInertialScrolling isn't implemented, but I hope sometime soon it will be. :)

Solution with proposed APIs

Basically, you'd allow "stretching" via a normal wheel event, and reset (& animate to 0 offset) when either:

1. scrollend event received, or
2. WheelEvent().isInertialScrolling === true

TLDR can't implement yet, but one boolean value away!

[atomiks]

@aeharding scrollend is now in Chromium 👀 (and this still isn't natively implemented 😒)

I know you said we need the isIntertialScrolling boolean, but are you sure there's no heuristic we can use? I might try hacking something together, hopefully not coming to a similar conclusion 😅