我有一个可滚动的工作样本,项目编号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>
解决方法
不要使用鼠标滚轮事件.而是使用可滚动的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());
}
});
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
