Jump to content
Search Community

Draggable on body element?

x0b 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

I'm a bit stuck due to the limitations of not getting a scroll event fire when scrolling the body on touch devices, can Draggable overcome this?

 

I was thinking it may be possible to use Draggable on the body element and turn off native scrolling, therefore simulating natural scrolling and also enabling any desired updates whilst Draggable is doing its thing... Am I barking up the wrong tree?

Link to comment
Share on other sites

Hi,

 

I never heard or read about something like this. Any particular reason why you can't wrap everything in a container and scroll that container using Draggable?, like that you'll get the current element's position with an onDrag callback. In this sample you can see the scroll amount being returned by Draggable:

 

Full view:

http://cdpn.io/wjxdA

 

Editor View:

See the Pen wjxdA by rhernando (@rhernando) on CodePen

 

Now due to some issue with codepen sandbox I couldn't create a sample using the body element, so you'll have to copy/paste the following code:

CSS

html
{
	height:100%;
	background: #444;
	overflow: hidden;
}

body
{
	background:#888;
	margin:0;
	padding:0;
}

#max-height
{
	position:absolute;
	top:0px;
	left: 0;
	margin:10px;
	width: 10px;
	height:1500px;
	background: black;
}

HTML

<div id="max-height"></div>

JS

var $body = $("body");

$body.css("height",$(document).height()+"px");

Draggable.create($body,
{
	type:"y",
	onDrag:function()
	{
		console.log(this.y);
	},
	bounds:
	{
		maxY:0, minY:-( $(document).height() - $(window).height() )
	},
	edgeResistance:0.7
});

That shows how to use it on the body element. As you can see is far more code and you'll have to take care of calculating the minY value on each resize event (when the user changes the device's orientation). My advice will be to stay with the site wrapped in an element and use Draggable to control that element's scroll.

 

Rodrigo.

  • Like 4
Link to comment
Share on other sites

Hi Rodrigo, 

 

Thanks for the answer, you're right - it makes sense to use a wrapper div instead of the body. Is there a way to show a native scroll bar when dragging?

 

Thanks

 

Edit : I realised using scrollTop instead of y means a scroll bar is shown, this also seems to make the animation quite jerky - is there something I need to change here or is scrollTop animation not as smooth as y animation?

Link to comment
Share on other sites

Hello X0b... Yes I agree with Rodrigo, wrapping in a container would be less hassle than scrolling the <body> tag which can cause some buggy behavior cross browser.

 

You could add the CSS property overflow:hidden to hide the scrollbars:

selector {
    overflow:hidden;
}

Hope that helps :)

Link to comment
Share on other sites

I realised using scrollTop instead of y means a scroll bar is shown, this also seems to make the animation quite jerky - is there something I need to change here or is scrollTop animation not as smooth as y animation?

Hi,

 

The reasons for this could be that, and I'm not completely sure, the scroll animations are not hardware accelerated unlike transforms such X and Y, that's the reason why with Y you get better results because by default Draggable forces 3D acceleration to ensure better performance.

 

In order to use a Y animation I'd recommend keep wrapping the site in an element and change that element's Y value using Draggable and with this.y you'll get the current position. Just be aware that you'll need to update and change the bounds of the Draggable instance everytime the user changes the device's orientation and if for some reason the documents content changes dynamically. For that you can use jQuery, like this:

var wrapHeight, domHeight, maxValue, newBound;

function getMaxValue()
{
  // the wrapper's total height
  wrapHeight = $("#site-wrapper").outeHieght();
  // the document's height
  domHeight = $(document).height();
  // the value passed as Draggable's bound
  maxValue = wrapHeight - domHeight;

  return maxValue;
}

$(window).on("resize", function()
{
  newBound = getMaxValue();
});

I updated the codepen for this scenario:

 

Full view:

http://cdpn.io/wjxdA

 

Editor View:

See the Pen wjxdA by rhernando (@rhernando) on CodePen

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi, 

 

Thanks for the replies. I'd like the performance of a Y transform compared to scrollTop but I also definitely want the scroll bar to show the user where they are on the page. What would you suggest is the best way of accomplishing this? A custom scroll bar?

 

Thanks

Link to comment
Share on other sites

Hi,

 

Yeah I too am not a fan of custom ones. I'll do some more testing and see whether the slight performance trade off warrants one or not.

 

Thanks a lot for everyones help  :mrgreen:

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...