0

Ive seen a simular thread but could'nt ask a followup question to it. I dont just want to simulate the rubberband effect but also make it possible to scroll all content even if the content is larger than its parent. I cant figure it out so i wanna ask for help here.

I set up a jsfiddle: http://jsfiddle.net/sAX4W/28/

enter code here

I want it to be possible to scroll down to the bottom of the text and have the rubberband effect as the text content ends. As you can see in my jsfiddle example, you cant scroll all down to past 30 as is the last text node.

Thanks for your time!

Kristoffer Frisell Jarnevid
  • 23
  • 2
  • 8
  • When "30" is visible, you want it to bounce back up to the top? – DevlshOne Jul 16 '13 at 11:43
  • oooh.. Sorry. No. tries to simulate the rubberband as in like IOS. So just when the child is lower than the parent it bounces to "1" and also bounce to "30" when child is higher than the parents height. I soon understood that i was not very good in explaining this issue :p – Kristoffer Frisell Jarnevid Jul 16 '13 at 11:55

1 Answers1

0

You can check the current top position and set css corresponding property of the draggable element on drag stop

stop: function(e, ui) {
    var diff = ui.helper.parent().height()-ui.helper.height();
    if (ui.position.top<=diff)
       ui.helper.css('top', diff+"px");
    else if (ui.position.top>=0)    
       ui.helper.css('top', "0px");

}

Besides that I think you should either use revert:true or your on drag function, not both

have a look at updated jsfiddle

paulitto
  • 4,585
  • 2
  • 22
  • 28