V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
jmyz0455
V2EX  ›  JavaScript

微信过度上滑下滑页面导致出现灰底有完美的解决方案吗?

  •  
  •   jmyz0455 · 2017-08-02 08:49:20 +08:00 · 5605 次点击
    这是一个创建于 2703 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在微信移动端里,页面在顶部 /底部时如果继续往下滑动 /往上滑动就会出现灰色底部,相信大家都遇到过吧,我想禁止这种情况发生,使得页面的表现跟普通移动浏览器的一样。

    开始我以为是个很简单的需求,判断好最上层元素(一般都是 body )滚动条,是否在顶部 /底部时还有往下拖动 /往上拖动的情况后,把滑动的默认事件屏蔽就可以了。

    当我写好判断条件,能完美判断是否应该触发屏蔽行为后,却发现无法触发屏蔽行为,下面语句全部一起上:

    ​ event.preventDefault();

    ​ event.stopPropagation();

    ​ document.removeEventListener("touchmove", 滑动事件, false);

    结果还是不行,我想既然我能正确判断出是否应该触发屏蔽行为的时机,那么剩下的屏蔽行为应该不会很难吧,于是我决定百*必*谷*一下,却发现很多答案,要么直接禁掉 document 的 touchmove 完事,要么在屏蔽行为里直接一句 event.preventDefault(); 就没了。但是评论下面不少人表示不完美,难道微信出来这么多年了,一直没有最优解?

    可能是我学技不精,求教。不希望借用插件。

    15 条回复    2017-08-02 17:23:55 +08:00
    lsf1012
        1
    lsf1012  
       2017-08-02 09:12:26 +08:00
    不是不精 是微信有意为之 灰色区域会显示当前网页的 url 防止被仿站
    oh
        2
    oh  
       2017-08-02 09:35:47 +08:00 via iPhone
    可以实现,但你说的不完美是什么表现呢
    66beta
        3
    66beta  
       2017-08-02 09:43:02 +08:00
    哪个灰色难道不是 webview 被移动了吗
    qq292382270
        4
    qq292382270  
       2017-08-02 09:45:10 +08:00
    有些网页是上下滑动的时候,整页切换的效果.. 他们就不会触发你说的这个灰底啥的.. 可以去这里看看灵感
    VtoEXL
        5
    VtoEXL  
       2017-08-02 09:46:51 +08:00
    这个我直接问过 weui 的作者,是有一个 jsAPI,但是没开放。
    https://github.com/Tencent/weui/issues/605
    Microi
        6
    Microi  
       2017-08-02 09:50:26 +08:00
    程序员跟设计师果然是天敌啊。
    Fooleap
        7
    Fooleap  
       2017-08-02 09:50:37 +08:00
    我一般不去改变,不得不时用这个 https://github.com/yuanzm/preventoverscrolljs
    forreal
        8
    forreal  
       2017-08-02 09:59:27 +08:00
    禁用页面滑动,然后用 touch 事件模拟滚动,就是工作量有点大
    az8321550924
        9
    az8321550924  
       2017-08-02 10:08:04 +08:00
    我已通过 hack 方式解决此问题
    正在开发的网站
    微信打开查看效果
    mabutou
        10
    mabutou  
       2017-08-02 10:14:31 +08:00
    可以把默认滑动禁掉,再使用单独 js 插件滚动页面内容。iScroll 貌似可以实现
    koor
        11
    koor  
       2017-08-02 11:05:06 +08:00
    jmyz0455
        12
    jmyz0455  
    OP
       2017-08-02 11:36:11 +08:00
    @Fooleap 这个插件关键的屏蔽行为语句:
    e.preventDefault();
    e.stopPropagation();
    return;
    前两个我可以理解,但是 return; 请问是什么意思呢。
    Fooleap
        13
    Fooleap  
       2017-08-02 12:21:41 +08:00
    @jmyz0455 这个 return; 只是中断函数的执行吧,具体可以看看作者的博文 http://www.cnblogs.com/yuanzm/p/4849568.html
    hronro
        14
    hronro  
       2017-08-02 13:17:33 +08:00 via iPad
    为什么要屏蔽浏览器的默认行为呢,这个需求本身就不对
    flowfire
        15
    flowfire  
       2017-08-02 17:23:55 +08:00
    我记得微信内核似乎修改过屏蔽了诸如 preventDefault 之类的方法
    以及 return flase 相当于 preventDefault,不过貌似是 IE hack 吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6009 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:10 · PVG 10:10 · LAX 18:10 · JFK 21:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.