JS - Slowing scroll at top and bottom

I have a custom scroll created for another project which I am trying to adapt for Tumult.
The goal of the custom scroll is to slow down the page scrolling when the user approaches the very top or the very bottom of the page.

Daniel was kind enough to help me adapt it to make it work. It slows down at the top, however, it does not slow down at the bottom.

Does anyone have any thoughts on how to solve this?

Scrolling.zip (8.4 KB)

Thanks!

Hello All,

I made my post and then there was a flurry of other posts :slight_smile: … wondered if my post got buried (or maybe its simply not that interesting :slight_smile: – open that possibility too.)

Just thought I would revive it in case there were any takers — @jimscott , @h_classen , @markhunte ?

HappyHyper

  1. Since @Daniel helped You originally I thought he would have responded to You as he is already familiar with your Hype doc.

  2. Speaking of Hype docs there was not one included in your ZIP file - just the HTML. One can always generate an HTML file from a Hype doc but not vice-versa. And the Hype doc is where the requested effect would be created~scripted.

  3. When I did run the HTML file it seemed to me to be fine as the scrolling everywhere (top, bottom, middle) was inertial. i.e. The scrolling keep going after releasing the scrolling thumb (slider) but quickly slowing down as it did so. Which lead me back to my first point (#1) above as I did not understand the problem just looking at the HTML file.

I’m still in the same place with this request… but your bump might get You help from other quarters that have a better grasp of the situation than I do.

1 Like

Sorry Jim. I alway try to include the Hype doc and thought I did.

Here it is.

Perhaps this helps explain better how it slows at the top but not at the bottom of the page.

Custom scroll - twice the height.hype.zip (14.2 KB)

So as best as I can tell this file does what You are requesting.

But I added a white background to the scene so I could tell when it was present in the viewport - otherwise the Scene (dimensions) and the color of the “Background” (set in the “Scene Inspector”) blended together and I could not discern where the bottom of the scene stopped.

Custom scroll - twice the height_JHSv1.hype.zip (14.7 KB)

With this set-up when I scrolled to the near bottom of the scene it slowed down (i.e. “inertial” scroll effect as I described in my previous post).

If there are other issues I am not understanding them.

1 Like

I think you have understood exactly what I am looking for but it is working for you and not for me. I am attaching a recording of what I see. I have included a Chrome and Safari recording. Firefox is the same as Safari.

I tried your file in Chrome and when I do a quick scroll up I can see the red rectangle coming in slowly, however the blue rectangle at the bottom comes in very quickly (no inertia) …?

As a sidepoint, for some reason Safari is adding another block of grey below the white rectangle background you added. Not sure why.

Sorry I can not replicate your experience unless…

In the Chrome screen capture I noticed a bounce at the top - so I got out my iPad & could recreate what I saw on the screen captures You provided.

Is this accurate - are You using a mobile device? If so the code that @Daniel provided does not work with mobile in my tests. AFAIK that inertial slow down at the top, and bottom, is inherent to iOS - at least since iOS 11.

“Inertial” scrolling is also called “momentum” scrolling according to my readings. Here is one article on this subject (by Chris Coyier).

To get my example to work (on iOS) that I uploaded in my previous post You simply need to disable the “On Scene Load” action that fires the function “customScroll”.

Have not tried Chrome on iOS as I do not have it.

If You wish to have both Desktop and Mobile work in this fashion You could probably do that using layouts & “On Layout Load” to fire (or not) Daniel’s code.

1 Like

hm, those scriptlines have nothing to do with scrolling. only intersection is that it requests ‘scrollY’ to do some calculation. further more it does not explicit take care of reaching the top or button of a website. it’s more of a transformY using some easing -> that slows down at some point. whatever this script is good for or not … it works as expected for me:
https://www2.aachener-zeitung.de/zva/karlo/test/scrollFake/

1 Like

that said … i guess it’s an interesting approach to achieve parallax-effects :slight_smile:

Jim,

Sorry I am unable to communicate the precise issue. It is the lack of slowing down at the bottom – not anything to do with a bounce at the top. No, I am not using a mobile device. This is on Mac – Chrome / Safari / Firefox. Not sure why it provides inertia at the bottom for you and not me :sweat_smile: :crazy_face:

Interestingly, Han’s uploaded page “does” show inertia at the bottom – the way I was looking for.

@h_classen Can you please attach the Hype doc so I can take a look more closely?

Thanks again.

sry, i have not kept my file, but it’s been nothing more than the approach in your first post …

  1. embed the script on documentload (sceneload is also ok …)
  2. set the var scroller to the hypedocument
  3. set position of the hype_document to fixed

nothing more …

2 Likes

Thank you Hans –

Somehow, setting position of hype_document to fixed was the one point that made a difference for me!

Works the way it should!

1 Like

Hooray - it is always so nice to find the solution… @h_classen does it again!

1 Like

Though … I solved nothing here :smile:

1 Like

This seemed like something…

1 Like