Scroll Timeline in a Div?

Question

Example: http://www.bartmclaughlin.com/scroll_div/scroll_div_v1.html
Edge project: https://www.yousendit.com/download/elNJc2ZOR0Y1R1BWUThUQw
Now I want to control the timeline of a symbol on the stage using scroll. I’ve posted an example above, with a button that scrolls down the div.
I don’t know how to simultaneously scrub the div’s timeline when scrolling in the div.
This code below (that I got from Tim Jaramillo’s post here: http://forums.adobe.com/message/5058756#5058756) will scrub the timeline of the Stage when it’s placed in the Stage.scroll event, but I don’t know how to use it to scrub the timeline of my symbol.
var myCalc = e.currentTarget.scrollTop/(e.currentTarget.scrollHeight-e.currentTarget.clientHeight);
var pos = Math.round( myCalc * sym.getDuration() );
sym.stop(pos);
This question is similar to my question here: http://forums.adobe.com/message/6263651#6263651
that was answered by hemanth kumar r. Thank you!
bart

Answer 1

Hi there,
Here is an example:
http://www.timjaramillo.com/code/edge/scroll_div_scrub_timeline/
Here is the source:
www.timjaramillo.com/code/edge/_source/scroll_div_scrub_timeline.zip
Since you aren't using the Stage.scroll method, you shouldn't put your code in that event. I think there was some confusion there.
1) So, start by removing your code from Stage.scroll event.
2) Place the below code on your button click event (calls function on Stage.compositionReady):
sym.getComposition().getStage().onClick();
3) Place the below code on Stage.compositionReady:
// timer constantly runs to check scroll position, and handle timeline scrubbin'
var timerScroll = setInterval(function() {
          sym.scrubTimelineScroll();
}, 10);
// this function is called on click of your button
sym.onClick = function()
     sym.$("parent").animate({scrollTop:500},750);
sym.scrubTimelineScroll = function()
// calulate percent scrolled
          var myCalc = sym.$("parent").scrollTop()/sym.$("parent")[0].scrollHeight;
   // get percent of timeline length
          var pos = Math.round( myCalc * sym.getSymbol('parent').getDuration() );
//scrub timeline
          sym.getSymbol('parent').stop(pos);