Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
qqignatqq

In a smooth scrolling Body overflow:hidden

Recommended Posts

Hello.

I'm trying to set up this post for myself: https://greensock.com/forums/topic/17300-smooth-page-scroll/ , but I can't do it

I've been trying to make sure that the smooth scrolling doesn't work in body but in div. I shouldn't have overflow on my body site. I understand that the problem is with these lines:
var html = document.documentElement;
var body = document.body;

I tried to write body = $('.mywindow'); but I have an error.

Can you tell me if this is possible at all?
Thank you

https://jsfiddle.net/cjenr2qg/

Link to comment
Share on other sites

I don't know how well smooth scrolling will work like that because because I never tried it without using the body, and I can't code something up for you at the moment. 

4 hours ago, qqignatqq said:

I tried to write body = $('.mywindow'); but I have an error.

 

That's probably because you're using jQuery, which wasn't used in my code sample. If you're not using the actual body, I would probably change the name of that var to something else to avoid confusion with the actual body.

body = document.querySelector('.mywindow');

The scrollY var might need to change too. Probably to something like this:

var scrollY = body.scrollTop || 0;

But I haven't tested that.

  • Like 3
Link to comment
Share on other sites

Thanks for the advice, but I still haven't figured it out. I'll sit back and think about how to make a smooth animation in the window. If I find a solution, I will definitely put it here. Maybe someone else will need it

Link to comment
Share on other sites

Hey @qqignatqq;

 

I totally do not understand your intention, your problem.
Just adjust the div #scroll to the #container ...

 

See the Pen LweMqG by mikeK (@mikeK) on CodePen

 

(If you want to see the scrollbar: #scroll width: 100%)

 

Happy scrolling ...

Mikel

 

Link to comment
Share on other sites

Thank you, Mikel, but this scroll doesn't work like that. There is a scrollbar in it, but not in your version.

Link to comment
Share on other sites

 

 

Here:   #scroll width:100%

 

See the Pen XvVOoj by mikeK (@mikeK) on CodePen

 

Play with the code and learn which change triggers which effect.

I tried different eases for down / up scrolling !

 

Happy testing and learning ...

Mikel

 

Link to comment
Share on other sites

Sorry, I didn't see the message... Okay, thank you. I'll deal with it. While I'm trying to understand why the scroll is acting strangely when changing direction.

Link to comment
Share on other sites

 

It's like a gear: the ratio of WrapperHeight and scrollDistance

as well as the easing define this special scroll animation.

 

An easing example:

 

See the Pen vopoyO by mikeK (@mikeK) on CodePen

 

 

Link to comment
Share on other sites

  • 2 weeks later...

Mikel, there's a very strange scrolling operation. At the very beginning of the page the scroll step is very small (~20px), and at the bottom of the page the step is very big (~100px). Here is the video: https://yadi.sk/i/VMIafj2PByExRw

Link to comment
Share on other sites

Hey @qqignatqq,

 

Please note the easings

 

 // !!!  different eases for up / down scroll !!!
  if (scrollNum > lastScrollTop) {  
    TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut});
  } else {   
    TweenLite.to(action, 1, {progress:progress, ease: Power0.easeNone});
  }

 

Try another ease that fits more to what you expect.

 

Kind regards

Mikel

 

Link to comment
Share on other sites

Thank you. I noticed, but I still don't understand how to work with it? 

Link to comment
Share on other sites

3 hours ago, qqignatqq said:

I still don't understand how to work with it

If you'd like the eases to be the same scrolling both up and down, then just put something like TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut});

 

You can change the ease to whatever you'd like. Mikel was demonstrating that you can have a different ease for scrolling up and down if you'd like to. 

  • Like 1
Link to comment
Share on other sites

18 minutes ago, ZachSaucier said:

If you'd like the eases to be the same scrolling both up and down, then just put something like TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut});

Do not confuse speed with distance. They run different distances. If I prescribe this code you gave me, nothing will change.

Link to comment
Share on other sites

Hey @qqignatqq,

 

don't be confused ...

 

See the Pen MWgyOrg by mikeK (@mikeK) on CodePen

 

  // !!!  for up / down same ease !!!
  if (scrollNum > lastScrollTop) {  
    TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut});
  } else {   
    TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut});
  }

 

Thanks ZACH.

 

Happy tweening ... however you wish it ...

Mikel

 

 

Link to comment
Share on other sites

Don't you see the video I'm sending you? At the very top of the page the distance is very small and at the bottom of the page the distance is very large. Here is another new video: https://yadi.sk/i/zPXV5W1SjKz9ZA

Link to comment
Share on other sites

The distance per scroll is set by the easing in the timeline. 

 

So if you want a consistent scroll distance no matter where it is scrolling, remove the easing like so:

 

var action = new TimelineMax({paused:true})
.to('.wrapper',1,{y:-wrapperHeight, ease: Power0.easeNone});

The other tween is tweening to a particular progress, so you can change the ease based on up or down if you'd like, as mikel showed.

 

See the Pen MWgyrME?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey @qqignatqq

 

You mean the space under the last GreenSock?
If you do not like this, take another approach.
 

See the Pen dybMdpx by mikeK (@mikeK) on CodePen

 

var action = new TimelineMax({paused:true})
.to('.wrapper',1,{y:-wrapperHeight+350, ease: Sine.easeInOut});

Best regards

Mikel

  • Like 2
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.
×