angularjs 古怪的滚屏问题

[sujin190]

用angularjs写的网站， 奇怪的是在手机chrome下不能滚屏，qq浏览器和微信浏览器都是好的，电脑版的chrome也不能滚屏，在document添加scroll、touchstart、touchmove、touchend事件后发现touchstart、touchmove、touchend都触发了，但scroll事件没有触发，html和body高度都远大于窗口高度，这会是神马原因呢？找了好久了，完全不明白

[learnshare]

看起来跟 Angular.js 没啥关系，是你写出 Bug 了吧

[sujin190]

@learnshare 那可能和什么有关系呢？chrome调试工具下在Event Listeners下看并没有touch相关事件的监听，不可能是touch事件阻止了啊

[learnshare]

@sujin190 如果写过点击/触摸事件的处理，去看看这一部分有没有问题

[chairuosen]

终极debug大法：一行一行删代码

[sujin190]

@learnshare 没有啊，没有注册和mouse、touch相关的事件，再说这样的话应该qq浏览器和微信浏览器也不能滚屏才是啊

[sujin190]

@chairuosen 这个。。ng好多代码初始化路由控制器的

[learnshare]

@sujin190 不帮你调试一下，我也看不出来

[sujin190]

@learnshare http://m.aimoge.com/trading#/info/546450a93f5bdd9c598b456a
这个页面，真纠结

[learnshare]

@sujin190 CSS 的问题

你这种写法相当于设置 body { height: 100%; } ，而且禁止了滚动（overflow）。

QQ 和微信那是表现异常，不是正常该得到的效果。

[sujin190]

@learnshare 非常感谢，确实是受html上的overflow:hidden的影响，css不是我另外的同学写的，有点乱，没理清楚

[learnshare]

这种写法和 body { height: 100%; } 效果是一样的，如果不需要对 body 及其子元素进行特殊定位，就尽量不要破坏 body 默认的高度和滚动行为（看你这个类 App 的页面，应该还是要这么干）。
特定元素的滚动（局部滚动）虽然很爽，但偶尔也会有问题。

[sujin190]

@learnshare 是啊，css乱确实很纠结，相互影响，不过这样又发现个现象，去掉overflow:hidden之后qq浏览器滚动是闪的很厉害，滚动时图片都一半一半的，有overflow:hidden似乎平滑很多

[wintersun]

有同学反映Angular Material project（https://material.angularjs.org/#/）的demo在微信浏览器（也就是所谓腾讯X5浏览器）中展现异常，难道移动端的IE终于出现了？？？

哈哈哈，只能大笑三声！

[sujin190]

@wintersun 确实x5在渲染、缓存和动画机制都不一样，坑啊

[sujin190]

不过话说html高度分明有好几千，因为overflow:hidden不能滚屏，这到底是谁的问题呢？