callback function when scrolling in 1 direction
<p>How can I get a callback when I scroll to the right 300px?</p>

<pre><code>&lt;div id="container"&gt;

    &lt;div class="scrollable"&gt;
        this will be 6000px wide
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>css</p>

<pre><code>#container {width: 900px; overflow: hidden;}
.scrollable {width: 6000px; overflow-x: scroll;}
</code></pre>

<p>js  (feel free to re-write, I just tried this as example)</p>

<pre><code>$('#container').scroll(function (evt) {
    var target = $(evt.currentTarget);
    horizontal_scroll = target.scrollLeft();
    if (previous_scroll &lt; horizontal_scroll &amp;&amp; horizontal_scroll % 100 == 0) {
        previous_scroll = horizontal_scroll;
        alert("You've scrolled 300px to the right");
    }

});
</code></pre>
