Jump to content
GreenSock

amar

Draggable + custom scrollbar

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

Hi, 

 

I'm using your Draggable class in a project. Until today i was facing issues, but after updating to the latest release (1.11.0), it worked great.

 

I was changing the look and feel of the scrollbar using http://manos.malihu.gr/jquery-custom-content-scroller/

 

But I started facing issues again, the error is 

Uncaught ERROR: No velocity was defined in the throwProps tween of [object Object] property: left ThrowPropsPlugin.min.js:14

Here's the code I use:

Draggable.create(".scroller", {type:"scrollLeft", edgeResistance:0.5, throwProps:true});

$(".scroller").mCustomScrollbar({
  set_width:"100%",
  scrollButtons:{
    enable:false
  },
  horizontalScroll:true,
  advanced:{
    autoExpandHorizontalScroll:true
  },
  theme:"dark"
});

Does anyone know why this happens? Thanks

Link to comment
Share on other sites

Hi,

 

Have you tried just Draggable and ThrowProps without the JQuery plugin?, please do it in order to narrow the possibilities about what could be causing the problem.

 

Also looking at some of the plugin samples with dev tools, I noticed that the plugin works on the "top" and "left" property values and uses the overflow property as hidden, while Draggable does work on the scrollTop and scrollLeft, so perhaps the issue could be the fact that the scroll property can't be accessed. Try also changing Draggable from scroll to left like that it'd be working on the same property the plugin does, maybe it could work.

 

Rodrigo.

Link to comment
Share on other sites

Hi Rodrigo,

 

It was working great with just the Draggable class without the jQuery plugin.

 

I also tried to change "scrollLeft" to "left", "x", etc, but it didnt get it to work. :(

Link to comment
Share on other sites

Yeah, that looks like a problem caused by how that plugin is adding custom wrapper <div> elements and managing things with top/left. I don't have time to try to wrestle with that plugin and figure out a way to make it compatible, but you could try making sure you're applying the Draggable to the right thing, like for example the wrapper <div> that the plugin is creating instead of your original content. If you're still having trouble, please post a very simple example (the simpler the better) that demonstrates the issue and generates that error you mentioned so that we can quickly peek at exactly what's going on in your particular situation. 

Link to comment
Share on other sites

Figured it out, here 's how you do it:

 

 

var container = $('#
container '); // this holds init div for the content to be made scrollable

container.mCustomScrollbar({
	set_width:"100%",
	scrollButtons:{
		enable:false
	},
	horizontalScroll:true,
	advanced:{
		autoExpandHorizontalScroll:true
	},
	theme:"dark"
});

var scroller = $('.mCSB_container '); // this holds content after the custom scrollbar plugin is run
var thumbDragger = $('.mCSB_dragger '); // this is the thumb for dragging the scrollbar

Draggable.create(".mCSB_container", {
	type:"left", 
	edgeResistance:0.5, 
	zIndexBoost:false, 
	bounds: document.getElementById("container"), 
	throwProps:true,
	onDragStart:function() {
		// to avoid any conflicts in drag animations
		container.mCustomScrollbar("stop");
	}, 
	onThrowUpdate:function() {

		// for some reason, the built-in method does not do live update, so we modify css live
		/*
		var no = Math.abs( parseInt( scroller.css("left") ) )
		scroller.mCustomScrollbar("scrollTo", no); 
		*/

		// edit live css
		var no = Math.abs(parseInt(scroller.css("left"))) / (parseInt(scroller.css("width")) - parseInt(container.css("width"))) * (parseInt(container.css("width")) - parseInt(thumbDragger.css("width")));
		thumbDragger.css("left", no);
		
		// update the scrollbar (just in case!)
		container.mCustomScrollbar("update");
	}
});

And it works as expected :)

  • Like 2
Link to comment
Share on other sites

Hi,

 

Glad that you could sort it out and thanks a lot for sharing the solution with the community. In fact your timing couldn't be better because yesterday another user ask for something similar, we'll let him know about your findings in order to use the custom scrollbar plugin.

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

happy to help and share rhernando, 

 

most jquery scrollbars work in very similar ways and the default scrollbar doesn't always look nice with a specific theme.

 

so hopefully that code snippet can be applied to other plugins with minimal changes.

 

btw, really love the gs framework.

Link to comment
Share on other sites

  • 1 year later...

with version 3 of mCustomScrollbar you will need

 

container.mCustomScrollbar("disable");

 

instead of "stop"

 

 

Thank you, helped me solve my problem with jQuery Simple Slider.

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