移动端浏览器和微信浏览器上禁止body的滚动条
一般禁止body滚动的做法就是设置overflow:hidden。
但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改成标签的定位,如body{overflow:hidden;},这个实现是可以的,没有滚动条。
再进一步分析,如果要用class去实现没有滚动条,如下代码设置:
.index_body {
overflow-y: hidden;/*为了兼容普通PC的浏览器*/
height: 100%;
position: fixed;
}
这个就是完全的禁止上下滑动,没有滚动条,且在iOS的safari浏览器上完全不能上下滚,但是确发现微信浏览器上可以上下缩动(下面再解决)。
我最后发现,上面这种解决是普遍的浏览器做法,如果要更彻底一点,就直接使用js代码去控制touchmove的事件,直接精致,这个在微信和手机浏览器上完成可行。
代码如下:
/*去掉手机滑动默认行为*/
$('body').on('touchmove', function (event) {
event.preventDefault();
});
我还收集了一些设置隐藏滚动条的方法:
1、body加position:fixed;width:100%;height:100%。
2、给要滚动的元素添加一个父级,设定高度,overflow:auto。
3、html,body{height:100%;overflow:hidden}。
参考:http://www.cnblogs.com/lbcheng/p/6044303.html
经过上面的设置,如果用户在微信浏览器上不能滚动,但是跳出到了iOS的safari浏览器之后,会有很多变数,比如高度不够,这时滚动也会好一些,那么我这样设置:
1、如果在微信上,默认禁止滚动,并且连默认的上下缩滑都不能。
2、当跳出到手机浏览器上完全可以滑动。
上面的思路实现:
1、通过微信useragent来判断,如果是微信浏览器自动加入class去设置。
2、非微信useragent就默认不加class。
具体实现:
微信上,禁止上下缩滑:
/*去掉手机滑动默认行为*/
$('body').on('touchmove', function (event) {
event.preventDefault();
});
判断微信浏览器:
/*微信浏览器特殊处理*/
if(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'){
$('body').addClass('index_body');//添加禁止滚动的样式
}else{
$('body').removeClass('index_body');//去除禁止滚动的样式
}
总结:通过js判断固然是好,但是会造成一些乱七八糟的问题,所以优先还是考虑css去控制。
移动端浏览器和微信浏览器上禁止body的滚动条的更多相关文章
- 【微信开发】JS和PHP分别判断当前浏览器是否微信浏览器
1.PHP端 //判断是否微信浏览器 -xzz1125 function is_weixin() { if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMes ...
- 如何判断页面是qq浏览器还是微信浏览器打开
// 判断是QQ浏览器还是微信浏览器的js代码isWx = function() { var ua = navigator.userAgent.toLowerCase(); return ua.mat ...
- 通过js区分移动端浏览器(微信浏览器、QQ浏览器、QQ内置浏览器)
由于公司业务中涉及到一个分享指引功能,而像微信.QQ内置浏览器需要引导用户点击右上角进行操作,其他浏览器则引导点击浏览器下方进行操作,因此需要区分浏览器类型: 通过在页面alert(navigator ...
- PHP JS判断浏览器,微信浏览器
微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信内置浏览器的User Agent,经过在 iPhone 上微信的浏览器的检测,它的 User Agent 是: Mo ...
- 判断手机浏览器还是微信浏览器(PHP)
//判断是否 微信浏览器 function isWeixin1() { if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== fa ...
- js判断浏览器的环境(pc端,移动端,还是微信浏览器)
window.navigator.userAgent用来区分设备和浏览器 <!DOCTYPE html> <html> <head> <meta charse ...
- 解决UC浏览器或微信浏览器上flex兼容问题
在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...
- 解决手机浏览器和微信中select中border:none;无用和去掉小三角
设置select的边框为none:在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框 解决办法: appearance:none; -moz-appearance:none; /* Fi ...
- C#判断用户是否使用微信浏览器,并据此来显示真实内容或二维码
平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就只显示当前地址的二维码.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览器,这 ...
随机推荐
- PHP开发之Zend Studio快捷键汇总
应用场景 快捷键 功能 查看快捷键 ctrl+shift+l 显示所有快捷键列表 查看和修改快捷键 打开Window->Preferences->General->keys 修改字体 ...
- SQL范式
第一范式:确保每列的原子性(字段不可分). 如果每列(或者每个属性)都是不可再分的最小数据单元(也称为最小的原子单元),则满足第一范式. 释义: 1.每一列属性都是不可再分的属性值,确保每一列的原子性 ...
- 搭建自己的PHP框架心得(二)
h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h ...
- 终于开始用github了
一直以来,github的大名就如雷贯耳.虽然我半年多前就从了解到了这个神奇的网站,而且趁着当时的一时兴趣注册了账户,但是对于那时候的我来说这个网站还是太复杂了点,毕竟半年前的我还没有开始写代码啊,所以 ...
- 内存管理内幕mallco及free函数实现
原文:https://www.ibm.com/developerworks/cn/linux/l-memory/ 为什么必须管理内存 内存管理是计算机编程最为基本的领域之一.在很多脚本语言中,您不必担 ...
- springMVC 拦截器如何做登录检查及页面跳转
一个非常简单的登录权限拦截器 问题一:登录页面的提交请求肯定是要过滤掉的,目前采用在xml里配置<mvc:mapping path="/supplier/*"/>来过滤 ...
- 删除Windows中隐藏的物理网卡和网络虚拟化失败后的虚拟网卡
Windows环境下,在更换硬件服务器主板和网卡等硬件.恢复操作系统或者网络虚拟化失败后,可能会出现网卡方面的问题.例如,设备管理器中多了不应该存在的网卡:因命名冲突无法重命名当前网络连接:IP地址冲 ...
- 理解 Nova 架构 - 每天5分钟玩转 OpenStack(23)
Compute Service Nova 是 OpenStack 最核心的服务,负责维护和管理云环境的计算资源. OpenStack 作为 IaaS 的云操作系统,虚拟机生命周期管理也就是通过 Nov ...
- 微信浏览器的HTTP_USER_AGENT
在iPhone下,返回 1 Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, lik ...
- 【转】How to hire——创业公司应该如何招人
How to hire After startups raise money, their next biggest problem becomes hiring. It turns out it’ ...