一般禁止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的滚动条的更多相关文章

  1. 【微信开发】JS和PHP分别判断当前浏览器是否微信浏览器

    1.PHP端 //判断是否微信浏览器 -xzz1125 function is_weixin() { if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMes ...

  2. 如何判断页面是qq浏览器还是微信浏览器打开

    // 判断是QQ浏览器还是微信浏览器的js代码isWx = function() { var ua = navigator.userAgent.toLowerCase(); return ua.mat ...

  3. 通过js区分移动端浏览器(微信浏览器、QQ浏览器、QQ内置浏览器)

    由于公司业务中涉及到一个分享指引功能,而像微信.QQ内置浏览器需要引导用户点击右上角进行操作,其他浏览器则引导点击浏览器下方进行操作,因此需要区分浏览器类型: 通过在页面alert(navigator ...

  4. PHP JS判断浏览器,微信浏览器

      微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信内置浏览器的User Agent,经过在 iPhone 上微信的浏览器的检测,它的 User Agent 是: Mo ...

  5. 判断手机浏览器还是微信浏览器(PHP)

    //判断是否 微信浏览器 function isWeixin1() { if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== fa ...

  6. js判断浏览器的环境(pc端,移动端,还是微信浏览器)

    window.navigator.userAgent用来区分设备和浏览器 <!DOCTYPE html> <html> <head> <meta charse ...

  7. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

  8. 解决手机浏览器和微信中select中border:none;无用和去掉小三角

    设置select的边框为none:在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框 解决办法: appearance:none; -moz-appearance:none; /* Fi ...

  9. C#判断用户是否使用微信浏览器,并据此来显示真实内容或二维码

    平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就只显示当前地址的二维码.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览器,这 ...

随机推荐

  1. rails中的form_for

    1 form_for方法是ActionView::Helpers::FormHelper模块内的方法,所以可以在ActionView的实例中直接调用 2 from_for方法的原型为form_for( ...

  2. 开发者调试工具Chrome Workspace

    Workspace是个什么样的东西呢?他能够在开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作,能够提高一定的效率 配置Chrom ...

  3. MS SQL专用管理员连接DAC

    在SQL SERVER 2005中,微软引入了一个叫做数据库专用管理员连接方式(DAC Dedicated Administrator Connection)的特性,使用这个新特性,数据库管理员可以在 ...

  4. 查看数据库表的数据量和SIZE大小的脚本修正

    在使用桦仔的分享一个SQLSERVER脚本(计算数据库中各个表的数据量和每行记录所占用空间)的脚本时,遇到下面一些错误 这个是因为这些表的Schema是Maint,而不是默认的dbo,造成下面这段SQ ...

  5. java数组对象的浅层复制与深层复制

    实际上,java中数组对象的浅层复制只是复制了对象的引用(参考),而深层复制的才是对象所代表的值.

  6. ANDROID 系统提示对话框(ALERTDIALOG)的使用

    new AlertDialog.Builder(baseActivity).setTitle("删除确认")//设置对话框标题 .setMessage("您确定要删除选中 ...

  7. Redis学习笔记1-Redis的介绍和认识

    说明:文章内容来自百度百科和redis官方对redis的介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API ...

  8. 【转】What is an SDET

    What is an SDET? SDET stands for Software Development Engineer in Test (or Software Design Engineer ...

  9. 【Windows编程】系列第三篇:文本字符输出

    上一篇我们展示了如何使用Windows SDK创建基本控件,本篇来讨论如何输出文本字符. 在使用Win32编程时,我们常常要输出文本到窗口上,Windows所有的文本字符或者图形输出都是通过图形设备接 ...

  10. 电信行业的BI应用

    截至2015年年底,我国三大运营商的移动用户数达到13.1亿户,4G /3G用户累计达到8.09亿户,再次创下新高.从三大运营商的年度财报来看,在具体业务方面,三大运营商的数据流量业务带来的收入均已超 ...