scrollable get current value of item

scrollable get current value of item

i have a working sample of scroll-able with item number 1 - 24 i want to get the value of the current item but i failed.exmaple the value is 1 then i scroll one so its 2 now i want to get the value of 2.i tried doing it to alert but its not working how does one do it this is my code. scroll

<!DOCTYPE html>
<html>
  <title>scroll</title>

    <!-- include the Tools -->
  <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<style type="text/css">
  /* root element for scrollable */
  .scrollable {

  /* required settings */
  position:relative;
  overflow:hidden;

  /*
  vertical scrollables have typically larger height than width but
  not now
  */
  height: 17px;
  width: 700px;
  }

  /* root element for scrollable items */
  .scrollable .items {
  position:absolute;

  /* this time we have very large space for the height */
  height:20em;
  }
</style>
</head>
<body>

<!-- root element for scrollable -->
<div id="scroll" class="scrollable vertical">

  <!-- root element for the items -->
    <div class="items" style="top: 0px;">

        <div>

            <div class="item">
                1

            </div>
        </div>
        <div>
            <div class="item">
                2

            </div>
        </div>
        <div>
            <div class="item">
                3

            </div>
        </div>
        <div>

            <div class="item">
                4

            </div>
        </div>
        <div>
            <div class="item">
                5

            </div>
        </div>
        <div>
            <div class="item">
                6

            </div>
        </div>
        <div>
            <div class="item">
                7

            </div>
        </div>
        <div>
            <div class="item">
                8

            </div>
        </div>
        <div>
            <div class="item">
                9

            </div>
        </div>
        <div>
            <div class="item">
                10

            </div>
        </div>
        <div>
            <div class="item">
                11

            </div>
        </div>
        <div>
            <div class="item">
                12

            </div>
        </div>

        <div>

            <div class="item">
                13

            </div>
        </div>
        <div>
            <div class="item">
                14

            </div>
        </div>
        <div>
            <div class="item">
                15

            </div>
        </div>
        <div>

            <div class="item">
                16

            </div>
        </div>
        <div>
            <div class="item">
                17

            </div>
        </div>
        <div>
            <div class="item">
                18

            </div>
        </div>
        <div>
            <div class="item">
                19

            </div>
        </div>
        <div>
            <div class="item">
                20

            </div>
        </div>
        <div>
            <div class="item">
                21

            </div>
        </div>
        <div>
            <div class="item">
                22

            </div>
        </div>
        <div>
            <div class="item">
                23

            </div>
        </div>
        <div>
            <div class="item">
                24

            </div>
        </div>      
    </div>
  </div>


<!-- javascript coding -->
<script>
$(function() {
    // initialize scrollable with mousewheel support
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });

});
</script>


</body></html>