Use as few scroll events as possible
Use as few scroll events as possible

I originally wrote this as a simple object to handle resize event
listeners. I now want to apply the same technique to the scroll event
listeners, but since they are added to different targets, I need to make
my solution a little more generic.

I started by thinking I could use an object of objects to track the
targets and event types and to manage all of the event listeners there.
However, since we need the keys to be references to DOM nodes, that
doesn't work because different DOM nodes of the same type end up being
the same key in an object. I think Map would work here, but if the DOM
nodes are removed before removing the event listeners, we don't have a
great way of cleaning up the Map, so I think we would end up with a
memory leak. WeakMap seems pretty ideal here, but the browser support
isn't good.

So, I decided to add some data to the DOM nodes themselves. I considered
using Object.defineProperty to add a non-enumerable property to the
objects, to prevent interfering with other operations that might happen
on the node. However, since these are DOM nodes, they are unlikely to be
stringified or looped over, so I decided to go with the simpler method
instead. This is the same approach that jQuery takes [0].

[0]: https://github.com/jquery/jquery/blob/f18ca7bf/src/data/Data.js#L31-L44

brigade/react-waypoint,brigade/react-waypoint