1

I want to implement some simple svg manipulation when the window has scrolled to a certain point – either when it has been scrolled by a set number of pixels or when a div or section reaches the top of the viewport.

I'd initially thought it would be straightforward in jquery, but I had a lot of trouble applying smooth transitions to svg elements.

I'm reasonably comfortable in d3, so I'm now hoping to use that. My trouble is that I can't find a way to determine how far the window has scrolled. Multiple SO and Google searches have turned up nothing I can use.

How do I find how much the window has scrolled or where an element is relative to the viewport in d3?

I should emphasise that the problem is that I need to animate svg elements. jQuery does this rather poorly, hence my need for d3.

tgerard
  • 293
  • 2
  • 15
  • 1
    Possible duplicate of [Start animation when scrolled to](http://stackoverflow.com/questions/30801588/start-animation-when-scrolled-to) – Alexander Solonik Apr 15 '16 at 08:29
  • look here http://stackoverflow.com/a/30802140/4381665 , its a regulation task in jQuery really ! :) – Alexander Solonik Apr 15 '16 at 08:29
  • Hi Alexander, Yes, it's simple to use scrollTop in jQuery, but jQuery is poor at animating svg elements. If it were just a normal DOM element it would be fine, but svg animation is slow and buggy in jQuery. – tgerard Apr 15 '16 at 08:34
  • use jQuery only to detect scrollTop and use d3.js to animate :) – Alexander Solonik Apr 15 '16 at 09:58
  • 1
    Oh, good grief! I (obviously) wasn't aware that I could just mix them in together like that. Thanks for your help. – tgerard Apr 15 '16 at 12:30

0 Answers0