Use different condition sets

[Sébastien Lorber]

Hi,

Sometimes we should be able to trigger different actions according to scroll conditions being met.

For example I have a scrollable item and when user reaches the bottom we may try to load the next page (paginated list), but also when the user scrolls just a little we want to be able to display a button that permits him to scroll to top.

It's not clear how I can use steady to register 2 scroll handlers. I don't know if I should create 2 Steady instances or hack around a single instance.

Here's what I've done that works with a single instance:

        this.steady = new Steady({
            conditions: {
                "min-top" : 0,
                "min-bottom": 0
            },
            scrollElement: this.getDOMNode(),
            throttle: 500,
            handler: function(values,done) {
                this.props.onScroll(this.getDOMNode());
                if ( values.bottom <= 1000 ) {
                    this.props.onScrollNearBottom(this.getDOMNode());
                }
                done();
            }.bind(this)
        });

See related issue: #30
This is why I use

            conditions: {
                "min-top" : 0,
                "min-bottom": 0
            },

This seems to trigger the handler everytime (what I want) and provide me the values.bottom (but I doon't really understand why I use min-bottom and not max-bottom it feels weird)

I don't know at all if there's a better way to do this with Steady

[Khalid Lafi]

The good way is to use two different instances of Steady.js .
since you're going two different things.

Think of it like this, for each function/handler you create a new instance for it.
Steady.js instances are good citizens and won't the performance of your DOM :)

Thanks for using Steady.js!

[Sébastien Lorber]

ok thanks :)