Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
440design

Tweenmax smooth scrolling without Rubber-band effect

Recommended Posts

Hi,

 

Does anybody know how to disable rubber-band effect in macOS with using tweenmax smooth scrolling? I know how to disable rubber-band using a simple code, but it doesn't work with smooth scrolling. I think it happens because smooth scrolling using body/html scroll indication.
Is it possible to change scroll indication from body/html to any div element or is there any way to disable rubber-band effect?

 

The simple custom code for disable rubber-band effect:

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  padding: 0;
  overflow: auto;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

 

Rubber-band in macOS Chrome browser:

<iframe src="https://giphy.com/embed/S6kGqZiGacx6FyJmLC" width="480" height="300" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/S6kGqZiGacx6FyJmLC">via GIPHY</a></p>

See the Pen NZoovp by Alex440 (@Alex440) on CodePen

Link to comment
Share on other sites

Hey 440design and welcome to the forums!

 

I can't reproduce the rubber band effect on my Macbook in the demo you provided with my mouse scroll. Is it with touch events only?

Link to comment
Share on other sites

5 minutes ago, ZachSaucier said:

Hey 440design and welcome to the forums!

 

I can't reproduce the rubber band effect on my Macbook in the demo you provided with my mouse scroll. Is it with touch events only?

 

Hi ZachSaucier

 

I think yes.
I used touchpad on my Macbook and Magic Mouse 2.
The effect was the same.
Site examples:
1) https://tweenmax-smooth-scroll.webflow.io
2) https://tweenmax-smooth-scroll.webflow.io/2

Screen: https://giphy.com/gifs/S6kGqZiGacx6FyJmLC/fullscreen

Link to comment
Share on other sites

Ah, I can reproduce it on the webflow demo. 

Link to comment
Share on other sites

11 hours ago, 440design said:

Is it possible to change scroll indication from body/html to any div element or is there any way to disable rubber-band effect?

 

No, I think you're stuck with using the body/html for now. That also causes problems on mobile with the URL bar showing and hiding. That's why I'd really like for that smooth scrolling thread to die. It's just way too problematic, and coming up with acceptable workarounds would take too much of my time.

 

One bit of good news is that Chrome/Android has a solution for selecting which element is the root scroller.

https://www.chromestatus.com/features/5162094739587072

https://github.com/bokand/root-scroller/blob/master/explainer.md

 

Please let Apple know that you'd like have that feature.

 

  • Like 6
Link to comment
Share on other sites

@OSUblake .. Why not disable any more comments in that smooth scrolling thread ?

 

Otherwise it will keep coming back to life, like a zombie in the dark of the night.

 

:)

  • Like 2
Link to comment
Share on other sites

Good idea, but that's only part of the problem. I still get direct messages on regular basis asking about those demos. :mad:

 

 

  • Haha 1
Link to comment
Share on other sites

TKgDeDv.jpg

  • Like 1
  • Haha 3
Link to comment
Share on other sites

14 hours ago, OSUblake said:

 

No, I think you're stuck with using the body/html for now. That also causes problems on mobile with the URL bar showing and hiding. That's why I'd really like for that smooth scrolling thread to die. It's just way too problematic, and coming up with acceptable workarounds would take too much of my time.

 

One bit of good news is that Chrome/Android has a solution for selecting which element is the root scroller.

https://www.chromestatus.com/features/5162094739587072

https://github.com/bokand/root-scroller/blob/master/explainer.md

 

Please let Apple know that you'd like have that feature.

 

Thanks for the answer.
Unfortunately, this is not a solution to my problem.
But I think that this topic can be closed.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×