V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sujin190
V2EX  ›  Angular

angularjs 古怪的滚屏问题

  •  
  •   sujin190 · 2015 年 4 月 1 日 · 4149 次点击
    这是一个创建于 3940 天前的主题,其中的信息可能已经有所发展或是发生改变。
    用angularjs写的网站, 奇怪的是在手机chrome下不能滚屏,qq浏览器和微信浏览器都是好的,电脑版的chrome也不能滚屏,在document添加scroll、touchstart、touchmove、touchend事件后发现touchstart、touchmove、touchend都触发了,但scroll事件没有触发,html和body高度都远大于窗口高度,这会是神马原因呢?找了好久了,完全不明白
    15 条回复    2015-04-01 23:04:26 +08:00
    learnshare
        1
    learnshare  
       2015 年 4 月 1 日
    看起来跟 Angular.js 没啥关系,是你写出 Bug 了吧
    sujin190
        2
    sujin190  
    OP
       2015 年 4 月 1 日
    @learnshare 那可能和什么有关系呢?chrome调试工具下在Event Listeners下看并没有touch相关事件的监听,不可能是touch事件阻止了啊
    learnshare
        3
    learnshare  
       2015 年 4 月 1 日
    @sujin190 如果写过点击/触摸事件的处理,去看看这一部分有没有问题
    chairuosen
        4
    chairuosen  
       2015 年 4 月 1 日
    终极debug大法:一行一行删代码
    sujin190
        5
    sujin190  
    OP
       2015 年 4 月 1 日
    @learnshare 没有啊,没有注册和mouse、touch相关的事件,再说这样的话应该qq浏览器和微信浏览器也不能滚屏才是啊
    sujin190
        6
    sujin190  
    OP
       2015 年 4 月 1 日
    @chairuosen 这个。。ng好多代码初始化路由控制器的
    learnshare
        7
    learnshare  
       2015 年 4 月 1 日
    @sujin190 不帮你调试一下,我也看不出来
    sujin190
        8
    sujin190  
    OP
       2015 年 4 月 1 日
    learnshare
        9
    learnshare  
       2015 年 4 月 1 日   ❤️ 1
    @sujin190 CSS 的问题

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

    QQ 和微信那是表现异常,不是正常该得到的效果。
    sujin190
        10
    sujin190  
    OP
       2015 年 4 月 1 日
    @learnshare 非常感谢,确实是受html上的overflow:hidden的影响,css不是我另外的同学写的,有点乱,没理清楚
    learnshare
        11
    learnshare  
       2015 年 4 月 1 日

    这种写法和 body { height: 100%; } 效果是一样的,如果不需要对 body 及其子元素进行特殊定位,就尽量不要破坏 body 默认的高度和滚动行为(看你这个类 App 的页面,应该还是要这么干)。
    特定元素的滚动(局部滚动)虽然很爽,但偶尔也会有问题。
    sujin190
        12
    sujin190  
    OP
       2015 年 4 月 1 日
    @learnshare 是啊,css乱确实很纠结,相互影响,不过这样又发现个现象,去掉overflow:hidden之后qq浏览器滚动是闪的很厉害,滚动时图片都一半一半的,有overflow:hidden似乎平滑很多
    wintersun
        13
    wintersun  
       2015 年 4 月 1 日
    sujin190
        14
    sujin190  
    OP
       2015 年 4 月 1 日
    @wintersun 确实x5在渲染、缓存和动画机制都不一样,坑啊
    sujin190
        15
    sujin190  
    OP
       2015 年 4 月 1 日
    不过话说html高度分明有好几千,因为overflow:hidden不能滚屏,这到底是谁的问题呢?
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   5332 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 07:18 · PVG 15:18 · LAX 23:18 · JFK 02:18
    ♥ Do have faith in what you're doing.