在微信移动端里,页面在顶部 /底部时如果继续往下滑动 /往上滑动就会出现灰色底部,相信大家都遇到过吧,我想禁止这种情况发生,使得页面的表现跟普通移动浏览器的一样。
开始我以为是个很简单的需求,判断好最上层元素(一般都是 body )滚动条,是否在顶部 /底部时还有往下拖动 /往上拖动的情况后,把滑动的默认事件屏蔽就可以了。
当我写好判断条件,能完美判断是否应该触发屏蔽行为后,却发现无法触发屏蔽行为,下面语句全部一起上:
event.preventDefault();
event.stopPropagation();
document.removeEventListener("touchmove", 滑动事件, false);
结果还是不行,我想既然我能正确判断出是否应该触发屏蔽行为的时机,那么剩下的屏蔽行为应该不会很难吧,于是我决定百*必*谷*一下,却发现很多答案,要么直接禁掉 document 的 touchmove 完事,要么在屏蔽行为里直接一句 event.preventDefault(); 就没了。但是评论下面不少人表示不完美,难道微信出来这么多年了,一直没有最优解?
可能是我学技不精,求教。不希望借用插件。
1
lsf1012 2017-08-02 09:12:26 +08:00
不是不精 是微信有意为之 灰色区域会显示当前网页的 url 防止被仿站
|
2
oh 2017-08-02 09:35:47 +08:00 via iPhone
可以实现,但你说的不完美是什么表现呢
|
3
66beta 2017-08-02 09:43:02 +08:00
哪个灰色难道不是 webview 被移动了吗
|
4
qq292382270 2017-08-02 09:45:10 +08:00
有些网页是上下滑动的时候,整页切换的效果.. 他们就不会触发你说的这个灰底啥的.. 可以去这里看看灵感
|
5
VtoEXL 2017-08-02 09:46:51 +08:00
这个我直接问过 weui 的作者,是有一个 jsAPI,但是没开放。
https://github.com/Tencent/weui/issues/605 |
6
Microi 2017-08-02 09:50:26 +08:00
程序员跟设计师果然是天敌啊。
|
7
Fooleap 2017-08-02 09:50:37 +08:00
我一般不去改变,不得不时用这个 https://github.com/yuanzm/preventoverscrolljs
|
8
forreal 2017-08-02 09:59:27 +08:00
禁用页面滑动,然后用 touch 事件模拟滚动,就是工作量有点大
|
9
az8321550924 2017-08-02 10:08:04 +08:00
我已通过 hack 方式解决此问题
正在开发的网站 微信打开查看效果 |
10
mabutou 2017-08-02 10:14:31 +08:00
可以把默认滑动禁掉,再使用单独 js 插件滚动页面内容。iScroll 貌似可以实现
|
11
koor 2017-08-02 11:05:06 +08:00
|
12
jmyz0455 OP |
13
Fooleap 2017-08-02 12:21:41 +08:00
@jmyz0455 这个 return; 只是中断函数的执行吧,具体可以看看作者的博文 http://www.cnblogs.com/yuanzm/p/4849568.html
|
14
hronro 2017-08-02 13:17:33 +08:00 via iPad
为什么要屏蔽浏览器的默认行为呢,这个需求本身就不对
|
15
flowfire 2017-08-02 17:23:55 +08:00
我记得微信内核似乎修改过屏蔽了诸如 preventDefault 之类的方法
以及 return flase 相当于 preventDefault,不过貌似是 IE hack 吧 |