zoukankan      html  css  js  c++  java
  • 移动端穿透问题

    附上完整的解决方案参考链接(http://www.imooc.com/article/283472

    在弹出层加一个父级元素遮罩层,阻止滚动事件,但是问题是遮罩层所有子元素(弹出层)也不能滚动。

    方法一:那么平级设置mask,绑定事件-》虽然滚动mask,页面没有穿透滚动问题,但是当弹出层滚动到头继续拉时页面会滚动

    方法二:弹出时body设置overflow:hidden,真机上面需要加上position:fixed,由于给了fixed定位,页面会弹上最顶部,然后记录当前高度,弹出层消失时还原body设置。但是页面顶部的banner图片会受到压缩,变形??

    方法三:最终使用的是自己通过touchmove,touchstart,touchend等方法模拟滚动,缺点是没有手机原生的滚动顺滑。

    实现代码如下

    var endpst = {}, //结束位置
                elepst= {}, 
                start={}; //初始位置
            var maxTop =  $('.content').height()-$('.contents').height();
            $('.contents').on('touchstart', function(event) {
                if(event.targetTouches.length > 1) return;
                    var touch = event.targetTouches[0],
                        style = window.getComputedStyle(this, null);// 当前元素的css 样式
     
                        start = {y: touch.clientY};
                        elepst = { 
                            y: parseFloat(style.getPropertyValue('top')),
                        };
    
            })
            $('.contents').on('touchmove', function(event) {
                if(event.targetTouches.length > 1) return;
                    
                    var touch = event.targetTouches[0],
                        offset = { y : touch.clientY - start.y }; //手移动的 偏移位置
     
                    endpst['top'] = (elepst.y + offset.y)<maxTop?maxTop:(elepst.y+offset.y);
                    endpst['top'] =  endpst['top']> 0? 0 :endpst['top'];
                    this.style.top = endpst.top + 'px';
            })
            $('.contents').on('touchend', function(e) {
                if(e.targetTouches.length > 1) return;
    
            })

    其中还遇见一个小bug:为什么页面的遮罩绑定的click事件pc端可以但是苹果手机上不生效,原因是:(参考链接:https://blog.csdn.net/littlebearGreat/article/details/79096520

    按照标签的语义化,button标签是用来点击的。而div,自己体会哈。
    
    给div加个属性  cursor:pointer;
    
    在苹果设备上onclick就有效了
  • 相关阅读:
    MongoCola Web化
    Qsys在系统集成中的应用
    js浏览器和浏览器插件检测的方法总结
    搭建一个简单的Struts2应用
    Moon.ORM最便捷轻盈的ORM
    如何从 Winform 移植到 Webform [自己搞定HTTP协议]
    细细品味Hadoop_Hadoop集群(目录)
    微软SQL Server 2012新特性Silverlight报表客户端 Power View
    json入门实例
    项目经理
  • 原文地址:https://www.cnblogs.com/longlongdan/p/11511691.html
Copyright © 2011-2022 走看看