移动端浏览器body的overflow:hidden并没有什么作用

今天突然遇到一个问题，使用li模拟select，但是碰到一个很尴尬的问题，给body加了overflow:hidden，但是body并没有禁止滚动条，滚动条依旧顺滑。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{overflow:hidden;height:100%;}
.box{height:2000px;background:red;}
</style>
</head><body>
<div class="box">
1<br />
2<br />
3<br /></div>
</body>
</html>

虽然设定了高度100%，即使设置一个固定的像素值，也禁止不了滚动条，于是百度好久也没找到答案，最后找别人讨论到了。

三种解决方案

1、body加position:fixed;width:100%;height:100%。

2、给要滚动的元素添加一个父级，设定高度，overflow：auto；

3、html,body{height:100%;overflow:hidden}

建议使用第三种，可以把overflow:hidden作为一个单独的隐藏类，更方便控制。

转载于:https://www.cnblogs.com/lbcheng/p/6044303.html

移动端浏览器body的overflow:hidden并没有什么作用相关推荐

overflow:hidden属性
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...
overflow:hidden的另一层含义
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...
在移动端设置overflow:hidden禁止滚动的解决方法
在移动端设置overflow:hidden禁止滚动的解决方法参考文章: (1)在移动端设置overflow:hidden禁止滚动的解决方法 (2)https://www.cnblogs.com/ko ...
安卓手机移动端页面为body设置overflow:hidden;不起作用
动态的改变body的样式,测试了可行 var scrollTop = $("body").scrollTop();//body设置为fixed之后会飘到顶部,所以要动态计算当前用户 ...
十、CSS三行代码实现溢出的文字省略号显示（white-space: nowrap;overflow: hidden;text-overflow: ellipsis;）
4. 溢出的文字省略号显示 4.1 white-space white-space设置或检索对象内文本显示方式.通常我们使用于强制一行显示内容 white-space:normal :默认处理方式wh ...
cocos html5 一直在加载失败,项目进行中的小问题-0426-【Cocos2d-html5】初识Cocos2d-html5-一些移动端浏览器的兼容性Bug_169IT.COM...
背景与前言现在什么技术火?Android,ios,HTML5,人工智能,云计算--如此多的技术,而且发展非常快,大家都很迷茫,到底要学什么呢?我也很迷茫,只能走一步算一步. 但是人总是有理想的是吧. ...
html5网页自动下滑,HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码...
H5手指下滑弹出负一屏, 阻止移动端浏览器内置下拉刷新功能,具体实例代码如下所示: 默认隐藏,负一屏,手指下滑即可弹出显示,上滑隐藏正式内容 import $ from 'jquery'; expo ...
PC端浏览器兼容性解决方案
代码兼容:IE7及以上,360浏览器,搜狗浏览器,谷歌,火狐,欧朋等等. 一.需要注意的地方 1.写好标准头 <!DOCTYPE html> 2.首先引入初始化css,保证消除不同浏览器的 ...
overflow:hidden;zoom:1 理解转__
overflow:hidden;zoom:1 http://hi.baidu.com/bbee888/item/ef80baf200de510085d27824 清除浮动的几种方法 1. 投机取巧法 ...

移动端浏览器body的overflow:hidden并没有什么作用

移动端浏览器body的overflow:hidden并没有什么作用相关推荐

最新文章

热门文章