Draggable + custom scrollbar

[amar]

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

[Rodrigo]

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.

[amar]

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.

[GreenSock]

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. 

[amar]

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

[Rodrigo]

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.

[amar]

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.

[redon77]

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.