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

2017-08-02 08:49:20 +08:00
 jmyz0455

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

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

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

​ event.preventDefault();

​ event.stopPropagation();

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

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

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

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/379691

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX