Jump to content
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

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Ah, I can reproduce it on the webflow demo. 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

TKgDeDv.jpg

  • Like 1
  • Haha 3

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.