这个能用原生写最好用原生的 xxx.addEventListener("touchstart",this,false)
touchmove
touchend
这3个过程来写,jqmobi是我见过最好的一个正对的web手机端的js框架。他可以使用zepto.js的一些插件 但是需要修改一些小地方就可以了。
<style type="text/Css">body{background-color:#000000}
.window{position:absolutez-index:1overflow:hiddenwidth:300pxheight:100pxbackground-color:redleft: 0px}
.dragme{position:relativewidth:300pxheight:800px}
</style>
//引入jqmobi
<script type="text/javascript">
var isdrag=false
var ty,y
$(function(){
document.getElementById("moveid").addEventListener('touchend',function(){
sdrag = false
})
document.getElementById("moveid").addEventListener('touchstart',selectmouse)
document.getElementById("moveid").addEventListener('touchmove',movemouse)
})
function movemouse(e){
if (isdrag){
var n = ty+ e.touches[0].pageY - y
$("#moveid").css("top",n)
return false
}
}
function selectmouse(e){
isdrag = true
ty = parseInt(document.getElementById("moveid").style.top+0)
y = e.touches[0].pageY
return false
}
</script>
</head>
<body>
<div align="left" class="window">
<div id="moveid" class="dragme">
<h1>这是一个可以通过触摸屏拖动的demo</h1>
<p>
向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动向上拖动
</p>
</div>
</div>
这是个很简单的例子 细节需要自己优化下
<script>window.addEventListener('scroll',function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if(scrollTop>300){
//判断当滚到高度大于300时候
console.log('300')
//这里写要触发的事件
}
},true)
</script>