Jquery Scroll / Slide on Hover

by blowsie

HTML

<script src="http://patrickwolf.com/hq/wp-content/themes/patrickwolf/js/jquery.scrollTo-1.4.2-min.js"></script>
<script src="http://patrickwolf.com/hq/wp-content/themes/patrickwolf/js/jquery.mousewheel.min.js"></script>
<div class="slidebox">
    <ul class='slider'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
    </ul>
    <a class="sbtn up">up</a>&nbsp;<a class="sbtn down">down</a>
</div>
<div class="slidebox">
    <ul class='slider'>
        <li>1</li>
        <li>x</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
    </ul>
    <a class="sbtn up">up</a>&nbsp;<a class="sbtn down">down</a>
</div>
<div class="slidebox">
    <ul class='slider'>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
       ...

CSS

.slidebox {float:left}
.slidebox ul{width: 150px; height:300px; overflow:hidden}
.slidebox li  {border:1px solid #ccc; padding:10px;margin:5px; background:#eee;}
.sbtn {padding:2px; background:#333; border: 1px solid #111; color:#eee; margin:5px; cursor:pointer }

JavaScript

$('.slidebox').each(function() {
    var slider = $(this).find('.slider');
    $(this).find('.up').hover(function() {
        slider.scrollTo('-=20000px', 30000);
    }, function() {
        slider.stop();
    });
    $(this).find('.down').hover(function() {
        slider.stop().scrollTo('+=20000px', 30000);
    }, function() {
        slider.stop();
    });
    $(this).bind('mousewheel', function(event, delta) {
        var change = 0 + delta;
        if (delta > 0) {
            slider.stop().scrollTo('-=75px', 0);
          event.preventDefault();

        }
        else {
            slider.stop().scrollTo('+=75px', 0);
             event.preventDefault();

        }
    });
});

$('.slider').each(function() {
    $(this).find('li').each(function() {
        var index = $(this).index();
        $(this).html(index);
    });
});