Jump to content
Search Community

Smooth Scroll with Scrollbar

Foscosands test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey everyone, I'm looking to get a bit of help.

 

I've made a parallax website and added smooth scrolling to it with the mousewheel, and that all works fine. Though if I use the scroll bar, the background images do not move, only the image in the foreground.

 

What I wanted to do it replicate the same smooth scrolling that's on the mousewheel, onto the scrollbar on the right hand side.

 

I want to replicate the scrolling like in this site:

http://thisisarc.com

 

You'll notice that scrolling with the mousewheel is smooth, and then if you click and drag the scrollbar on the right it eases into position. Can anyone give me tips on how to do this? I know a lot of AS3 but not much JS at all, this is all kind of new to me.

 

This is the smooth scrolling code i'm using

$(function(){
	
	var $window = $(".parallax");		//Window object
	
	var scrollTime = 1.2;			//Scroll time
	var scrollDistance = 70;		//Distance. Use smaller value for shorter scroll and greater value for longer scroll
		
		$window.on("mousewheel DOMMouseScroll", function(event){
		
		event.preventDefault();	
										
		var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
		var scrollTop = $window.scrollTop();
		var finalScroll = scrollTop - parseInt(delta*scrollDistance);
			
		TweenMax.to($window, scrollTime, {
			scrollTo : { y: finalScroll, autoKill:true },
				ease: Power1.easeOut,
				autoKill: true,
				overwrite: 5							
			});
					
	});
	
});

Thanks guys

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.
×
×
  • Create New...