给该div绑定如下事件
这时,鼠标在该div区域滚动时,页面不会滚动。
参考资料: 请教控制滚动 div 的同时不滚动页面, 当 div 滚动到底部时同样不滚动页面!
这个能用原生写最好用原生的 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>
这是个很简单的例子 细节需要自己优化下
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)