我有一个可滚动的工作示例，项目编号为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上添加了这个，它现在正在工作，但它的输出只是向上和向下。我找不到一种方法来获得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>
不要使用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());
}
});
});
参考