今天突然遇到一个问题，使用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"><br /><br /><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作为一个单独的隐藏类，更方便控制。

移动端浏览器body的overflow:hidden并没有什么作用的更多相关文章

  1. 解决overflow:hidden在安卓微信页面没有效果的办法

    在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...

  2. overflow:hidden 你所不知道的事

    overflow:hidden 你所不知道的事 overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. ...

  3. DIV+CSS 中的 overflow:hidden

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...

  4. overflow:hidden的另一层含义

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是 很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  5. CSS 的overflow:hidden 属性详细解释

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出, 而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  6. overflow:hidden与position:absolute

    在做一个下拉框的动画效果中遇到了这个bug,记录一下. 在写下拉框的动画的时候,一般我们的做法都是把下拉框的外盒子设为overflow:hidden,然后设下外层盒子高度,之后通过js慢慢的改变高度从 ...

  7. JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  8. 解决overflow: hidden在移动端失效问题

    1.问题:移动端出现弹窗后,滑动页面,页面底部出现空白 二.原因 经过分析,发现overflow: hidden;在移动端失效,导致弹窗出现时,滑动页面,页面底部出现空白. 三.解决 参考网址:htt ...

  9. 修改css的（屏蔽）overflow: hidden;实现浏览器能把网页全图保存成图片

    摘要: 1.项目需要,需要对网页内容“下载”保存成全图片 2.QQ浏览器等主流浏览器都支持这种下载保存功能 3.项目需要场景:编写好的项目维护文档,放在服务器上.如果是txt不能带图片可视化,如果wo ...

随机推荐

  1. word-break|overflow-wrap|word-wrap——CSS英文断句浅析

    ---恢复内容开始--- word-break|overflow-wrap|word-wrap--CSS英文断句浅析 一 问题引入 今天在再次学习 overflow 属性的时候,查看效果时,看到如下结 ...

  2. [Network Analysis] 复杂网络分析总结

    在我们的现实生活中,许多复杂系统都可以建模成一种复杂网络进行分析,比如常见的电力网络.航空网络.交通网络.计算机网络以及社交网络等等.复杂网络不仅是一种数据的表现形式,它同样也是一种科学研究的手段.复 ...

  3. [LeetCode] Excel Sheet Column Title 求Excel表列名称

    Given a positive integer, return its corresponding column title as appear in an Excel sheet. For exa ...

  4. FineUI（专业版）v3.1发布（ASP.NET控件库）！

    FineUI(专业版)v3.1 正式发布,60多项更新,官网示例多达 690 个,新增 30 个页面加载动画! 自 2008 年 4 月发布第一个版本,我们持续更新了 126 个版本,拥有 16000 ...

  5. Nfs+Drdb+Heartbeat 数据存储高可用服务架构方案

    一.方案的应用场景 适用于2千万-3千万PV架构的网站,Nfs数据存储高可用服务方案 备注:互联网排名前30左右公司常用的架构 二.生产环境方案部署原理图 三.生产环境服务器硬件配置: 生产环境中采用 ...

  6. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  7. CephRGW 在多个RGW负载均衡场景下，RGW 大文件并发分片上传功能验证

    http://docs.ceph.com/docs/master/radosgw/s3/objectops/#initiate-multi-part-upload 根据分片上传的API描述,因为对同一 ...

  8. 82.Android之MVP+Retrofit+RxJava实践小结

    转载:http://wuxiaolong.me/2016/06/12/mvpRetrofitRxjava/ 关于MVP.Retrofit.RxJava,之前已经分别做了分享,如果您还没有阅读过,可以猛 ...

  9. Javascript提交表单

    <form action="login.do?act=login" method="post"> <input type="subm ...

  10. Block 代码快

    1.原理 1.1block类型 a.全局bock块   贯彻整个程序 b.栈块  存在于栈内存中,作用域中使用 c.堆块  自行管理其内存 注*:http://blog.parse.com/learn ...