mobile-web 相关

[5Mi]

移动web页面弹性滚动

移动端ios fixed属性可能出现问题

参考

在出现滚动条的div上加样式-webkit-overflow-scrolling:touch;,overflow:auto;

iOS Safari应该是需要5.0。Android只在4.0以上支持。

CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。但是这相对是耗更多内存的，最好在产生了非常大面积的overflow时才应用。

---

移动端active伪类无效的解决方法

active伪类在PC端的作用为鼠标点击到放开时给元素添加样式用，呈现目标被点击的激活状态.但是直接在移动端这么写会发现没有效果 需要:

document.body.addEventListener('touchstart', function (){}); //...空函数即可

参考

[5Mi]

ios中 new Date() 不支持类似1990-12-1这种格式 需转换为类似1990/12/1 项目中

//this.order.orderCompletedTime 为类似'2016-09-11 12:03:12' new Date(this.order.orderCompletedTime.replace(/-/g, "/"))

[5Mi]

禁用ios橡皮筋效果

1. 需要某个盒子（div）可以滑动，那么就不能阻止该盒子以及该盒子后代元素的默认行为（touchmove的滚动行为），所以我们需要识别盒子元素及其后代元素，不执行阻止其默认行为的操作
2. 当滚动元素到达顶部时继续向上滑时，同样需要阻止其默认事件。滚动到底部时，继续向下滚动也许阻止其默认行为(document.body.addEventListener('touchmove', function(e){e.preventDefault()},{ passive: false })

(function(scrollClassName){
            var startY = 0;
            var scrollBox = document.querySelector('.'+scrollClassName);

            document.addEventListener('DOMContentLoaded',function(){
                document.body.addEventListener('touchstart', function(e){
                    startY = e.touches[0].pageY;
                }, { passive: false });

                document.body.addEventListener('touchmove', function(e){
                    var moveY = e.touches[0].pageY;
                    var top = scrollBox.scrollTop;
                    var ch = scrollBox.clientHeight;
                    var sh = scrollBox.scrollHeight;
                    if (!hasParent(e.target,scrollClassName)) {
                        e.preventDefault();
                    } else if ((top === 0 && moveY > startY) || (top + ch === sh && moveY < startY)) {
                        e.preventDefault();
                    }
                }, { passive: false });
            })

            function hasParent(el, parentClass){
                while(!el.matches('body')){
                    if(el.classList.contains(parentClass)){
                        return true;
                    }
                    el = el.parentElement
                }
                return false;
            }
        })('scroll_wrap') //可滚动类名

or 使用 iNoBounce

参考

[5Mi]

IOS9中设置请求头(headers)的属性值时，头部跟结尾不允许出现空格

否则报错 SyntaxError: DOM Exception 12 setRequestHeader@[native code] 导致ajax请求失败

参考