Use jquery mousewheel to run function
<p>I have the following code that allows a user to scroll some content by hovering some arrows and making a div move and down.</p>

<p>Would it be possible to use the jquery mousewheel plugin to also make it move up and down? </p>

<pre><code>var sidebar = $('#sidebar');
        var scroll = $('.scroll');
        var up = $('#up');
        var down = $('#down');

        // If the scroll content is bigger than the sidebar
        if ($(scroll).height() &gt; $(sidebar).height()) {

            // Show the up and down arrows
            $(up).show();
            $(down).show();

            // Position the sidebar to allow space for the buttons
            $(sidebar).animate({ "top": "16px" }, "fast");
            $(sidebar).animate({ "bottom": "16px" }, "fast");

            // When you hover the down button move the scroll down
            $(down).hover(function () {
                animateContent("down");
            }, function () { $(scroll).stop(true, false); });

            // When you hover the up button move the scroll up
            $(up).hover(function () {
                animateContent("up");
            }, function () { $(scroll).stop(true, false); });
        }
        else {

            // Hide the up and down arrows
            $(up).hide();
            $(down).hide();

            // Stop all other animations
            $(sidebar).stop(true, false);
            $(scroll).stop(true, false);

            // Reposition the sidebar and scroll content into a default positon
            $(scroll).animate({ "marginTop": "0px" }, "fast");
            $(sidebar).animate({ "top": "0px" }, "fast");
            $(sidebar).animate({ "bottom": "0px" }, "fast");
        }

        function animateContent(direction) {

            var animationOffset = $(sidebar).height() - $(scroll).height();

            if (direction == 'up') {
                animationOffset = 0;
            }

            $(scroll).animate({ "marginTop": animationOffset + "px" }, "fast");
        }
</code></pre>

<p>So far I've tried this:</p>

<pre><code>$(sidebar)
                .bind('mousewheel', function (event, delta) {

                    var dir = delta &gt; 0 ? 'Up' : 'Down';

                    if (dir == 'Up') {
                        animateContent("up");
                    }
                    else if (dir == 'Down') {
                        animateContent("down");
                    }

                    return false;
                });
</code></pre>

<p>Which sort of works but I also need to add the parts about stopping the scrolling</p>

<p>e.g.</p>

<pre><code>function () {
                    animateContent("down");
                }, function () { $(scroll).stop(true, false); }
</code></pre>
