移动端网站表层div滑动到底部，底层body也滑动

2016-11-16 hanbin JavaScript

第一种方法：给body一个overflow：hidden 和高度100%没用。

第二种方法：给body一个touchmove的阻止事件 e.preventdeault 在PC端管用但在移动端还是不起作用。

第三种方法：给div一个阻止冒泡事件 e.stopPropagation() 手机上还是不起作用。

解决方法：

最后发现只要div的滚动轴动到底部boby就会触发滑动，所以只要判断滚动条滑动到底部对表层div touchmove的阻止事件，判断滚动轴到底部阻止事件，向上滑动，开启事件，所以只需要判断touchmove的方向。

<script src="jquery-1.8.0.min.js"></script>
<script>
$("div").bind("touchstart", function (events) {
startX = events.originalEvent.changedTouches[0].pageX;
startY = events.originalEvent.changedTouches[0].pageY;
});
$("div ul").bind("touchmove", function (e) {
var ulheight = $(this).height();
var scrollTop = $(this).scrollTop();
var scrollheight = $(this)[0].scrollHeight;
if (ulheight + scrollTop + 20 >= scrollheight) { //滚到底部20px左右
$("div").bind("touchmove", function (event) {
moveEndX = event.originalEvent.changedTouches[0].pageX,
moveEndY = event.originalEvent.changedTouches[0].pageY,
theX = moveEndX - startX;
theY = moveEndY - startY;
if (Math.abs(theY) > Math.abs(theX) && theY > 0) { //这里是判断上滑还是下滑！绝对值方式！
$("div").unbind("touchmove");//滑动到底部再往上滑动，解除阻止！ }
if (Math.abs(theY) > Math.abs(theX) && theY < 0) {
event.preventDefault();//滑动到底部，再往下滑动，阻止滑动！ } }) } 
</script>

分享到： QQ空间新浪微博腾讯微博微信更多

« thinkphp 解压Zip文件 | 将Eclipse项目导入Android Studio遇到的各种坑»

移动端网站表层div滑动到底部，底层body也滑动

日历

存档

最新评论

链接

搜索