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

angularjs 古怪的滚屏问题

  •  
  •   sujin190 · 2015-04-01 10:21:27 +08:00 · 3739 次点击
    这是一个创建于 3522 天前的主题,其中的信息可能已经有所发展或是发生改变。
    用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-04-01 11:08:50 +08:00
    看起来跟 Angular.js 没啥关系,是你写出 Bug 了吧
    sujin190
        2
    sujin190  
    OP
       2015-04-01 11:42:40 +08:00
    @learnshare 那可能和什么有关系呢?chrome调试工具下在Event Listeners下看并没有touch相关事件的监听,不可能是touch事件阻止了啊
    learnshare
        3
    learnshare  
       2015-04-01 11:54:58 +08:00
    @sujin190 如果写过点击/触摸事件的处理,去看看这一部分有没有问题
    chairuosen
        4
    chairuosen  
       2015-04-01 12:01:57 +08:00
    终极debug大法:一行一行删代码
    sujin190
        5
    sujin190  
    OP
       2015-04-01 12:35:24 +08:00
    @learnshare 没有啊,没有注册和mouse、touch相关的事件,再说这样的话应该qq浏览器和微信浏览器也不能滚屏才是啊
    sujin190
        6
    sujin190  
    OP
       2015-04-01 12:43:42 +08:00
    @chairuosen 这个。。ng好多代码初始化路由控制器的
    learnshare
        7
    learnshare  
       2015-04-01 13:44:44 +08:00
    @sujin190 不帮你调试一下,我也看不出来
    sujin190
        8
    sujin190  
    OP
       2015-04-01 13:55:10 +08:00
    learnshare
        9
    learnshare  
       2015-04-01 14:59:25 +08:00   ❤️ 1
    @sujin190 CSS 的问题

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

    QQ 和微信那是表现异常,不是正常该得到的效果。
    sujin190
        10
    sujin190  
    OP
       2015-04-01 15:19:22 +08:00
    @learnshare 非常感谢,确实是受html上的overflow:hidden的影响,css不是我另外的同学写的,有点乱,没理清楚
    learnshare
        11
    learnshare  
       2015-04-01 15:26:18 +08:00

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