Question

我有一个可滚动的工作样本，项目编号1 - 24我想获得当前项目的价值，但我失败了。我试着去警戒但是不工作怎么做呢这是我的代码

更新问题：我能够得到可滚动值的索引，现在我的问题是我无法找到获取每个索引的值的方法，以获得我的代码中的索引值吗？

更新：

<script>
$(function() {
    // initialize scrollable with mousewheel support
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });   
    $('#scroll').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta < 0) {
            //scroll down
            console.log('Down');
            alert('Down');
        }else {
            //scroll up
            console.log('Up');
            alert('Up');
        }

        //prevent page fom scrolling
        return false;
    });
}); 
</script>

我在我的js上添加了它现在的工作，但它的输出只是UP和DOWN我找不到一种方法来获得div的确切值任何建议？

<!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>

Answer 1

请勿使用mousewheel事件。而是使用可滚动的onSeek方法。这是一个工作示例，代码如下所示：http://jsfiddle.net/bluegeek9bluegeek9/b5xn5/

$(document).ready(function() {

  $(".scrollable").scrollable({ 
    vertical   : true,
    mousewheel : true,
    onSeek     : function(){
       console.info("current position is: " + this.getIndex());
       console.info('current value is:', $('#scroll div.items > div:nth-child(' + (this.getIndex()+1) + ') > div.item').text());
    }
  });   

});

Reference

scrollable获取item的当前值

1 个答案: