今天突然遇到一个问题，使用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. 安全测试 - 端口嗅探工具Nmap

    Nmap 在官网下载nmap端口检测工具https://nmap.org/,nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端. 使用: 通过cmd命令:nmap www.5i5j.c ...

  2. Mysql5.5升级到5.7后MySQLdb不能正常使用的问题解决

    ubuntu系统 报错信息1 Type "help", "copyright", "credits" or "license&qu ...

  3. Ubuntu解压缩命令

    原文链接:http://www.linuxidc.com/Linux/2012-08/68122.htm ZIP zip可能是目前使用得最多的文档压缩格式.它最大的优点就是在不同的操作系统平台,比如L ...

  4. [LeetCode] Binary Tree Postorder Traversal 二叉树的后序遍历

    Given a binary tree, return the postorder traversal of its nodes' values. For example: Given binary ...

  5. VS调试经常打断点打上之后没反应的问题

    在调试的时候经常会发现打了断点但是始终不进到程序中来,这是因为访问的这个页面在服务器中有缓存,也就是在iis中产生了缓存.访问的时候直接进到读取的缓存文件, 根本没有读取项目文件,所以打了断点肯定进不 ...

  6. SD卡的监听

    摘要:在一般应用中,如果需要对占用空间比较大的文件操作,需要监听SD卡的状态,Android中对SD卡的监听状态操作步骤如下: 一.创建一个类继承于BroadcastReceiver public c ...

  7. Linux 基础操作

    根据关键字查找文件信息: cat <文件名> | grep <关键字>查询文件信息 显示100行: tail -100f easyhome.all.log |grep &quo ...

  8. [推荐] PNG压缩网站：TinyPNG

    问题场景 最近在做一些网站性能优化方面的工作. 部分小图转化为Base64与css同步下载,但几张比较大的图(100k~300k)就不太适合转成Base64了,转换后会更大,影响css下载速度: 但采 ...

  9. echarts-案例

    关系图 http://echarts.baidu.com/echarts2/doc/example/force1.html http://www.cnblogs.com/spring_wang/p/4 ...

  10. c++中的lambda特性

    来源: http://www.jb51.net/article/56147.htm cocos2dx3.0测试: 1.有参数a,b printf("lambda=%lf", []( ...