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

最新推荐文章于 2020-08-15 14:39:31 发布
最新推荐文章于 2020-08-15 14:39:31 发布
阅读量158 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/lbcheng/p/6044303.html
版权

今天突然遇到一个问题，使用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

weixin_30505043
关注
使用overflow: hidden来禁用页面滚动条
12-13
复制代码代码如下: html { overflow: hidden; } body { overflow: hidden; } 在IE6，7下需要设置html有效，在其它标准浏览器下设置body就可以
详解移动端实现内滚动的四种解决方案
09-22
- 对于页面主体，设置`body`的`height: 100%`和`overflow: hidden`，这样可以禁用默认的全页面滚动，使得内容仅限于一屏显示。 - 需要滚动的部分通常是一个独立的容器，可以使用CSS的`position: absolute`或`fixed...
给body设置overflow：hidden在移动端不管用
weixin_30256901的博客
08-10 221
如果是将overflow:hidden用在了body上那么不管用，因为移动端是基于touch事件。 可以将要隐藏滚动的内容加上一个包裹层div， 然后给这个div设置高度为window.height()， 并且overflow:hidden 转载于:https://www.cnblogs.com/wzy1569178479/p/7341322.html...
手机端 body{overflow:hidden}不生效问题的真正解决办法
夏夜星海的博客
10-17 1万+
手机端 body{overflow:hidden}不生效问题的真正解决办法解决办法原理解释总结demo 手机常见的一种设计：在弹出消息提示框浮层后（有的还要求提示框内容可滑动），禁止body部分滑动。 常见的解决方法是：body { overflow:hidden }，这在pc端很有效，但是在手机端却不生效。 解决办法 先说解决办法吧： 不管 安卓 还是ios，只需用css 即可完美解决！ css...
<!DOCTYPE html>声明下div高度100%
weixin_30555125的博客
06-25 69
问题：在HTML页面中声明<!DOCTYPE html>，页面中div属性设置100%页面显示不正常 body { max-width: 720px; margin: 0 auto; } .case { background-color: #68CDD5; height: 100%; } 页面中case为最...
页面的百分比布局
qq_35315439的博客
08-15 4817
写一个产业图谱的页面已经很久，却从没有进行复盘过。自己细细一想，自己写的页面，对它总体的把控却没有。感觉一个页面是在修修补补中完成的。所以特定总结一个百分比的页面布局。 知识点： 基本的Html页面构成： //<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 <!doctype html> <html> <head> <meta charset="utf-8">
html 中关于添加doctype之后设置height：100%不起作用的问题
bylxt的博客
03-14 766
如图所示，css中设置了height高度为% 形式，但是并未生效， 解决办法 1：删除头部 docktype 标签 2：在css中添加 html，body {height：100%}
vue 移动端浏览器全屏展示
最新发布
04-30
你可以使用以下 CSS 样式来让 Vue 移动端应用在浏览器中全屏展示： ```css body { margin: 0; padding: 0; overflow: hidden; } #app { width: 100%; height: 100%; } ``` 这样，`#app` 元素会占据整个...
移动端Web开发：针对手机和平板的优化
## 1.1 移动端Web开发概述 移动端Web开发是指针对移动设备（手机、平板等）进行的Web开发工作。随着移动设备的普及和互联网的发展，越来越多的用户通过移动设备访问网页，因此移动端Web开发变得至关重要。 ## 1.2 ...
移动端手指放大缩小插件与js
10-19
整个HTML和body元素的高度也被设置为100%，防止在缩放时出现滚动条，因为`overflow`属性被设置为`hidden`。 源码中的`viewport`元标签定义了视窗的宽度、初始缩放比例以及最大缩放比例，确保了在不同设备上的兼容性...
移动端网页：给body设置 overflow：hidden 无效的解决办法
一捆铁树枝的博客
11-06 3723
做移动端网页的时候，总会遇到一些奇葩的问题，在PC端浏览器做模拟调试时，都是完美显示的，但是一到真机调试就是各种坑； 我在做移动端网页时的需求是这样的： 页面背景图片是自适应屏幕大小的，页面上有输入框和按钮，当点击输入框时，移动端的软键盘弹出，但是背景图片不能受影响而被压缩，且页面不能应为软键盘的弹出高度超出屏幕显示高度而上下滚动； 我的解决方案如下： 在页面初始化时，获取设备像素可见宽高...
解决移动端overflow：hidden无效的问题
just try
04-01 4451
最近在做移动端项目的时候，遇到一个问题，就是当我添加一个事件是使body：overflow：hidden，在pc端有效，但是在移动端却无效。 解决办法很简单，try：html，body{ height:100%; overflow:hidden; }instead of just:body{ height:100%; overflow:hidden; }
关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）
热门推荐
Emily
10-23 27万+
一. overflow:hidden 溢出隐藏 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 /*css样式*/ <style type="text/css"> div{ width: 150px; height: 60px; background: skyblue; overflo...
overflow: hidden;在安卓微信页面失效问题
师远鹏
11-12 1万+
在做h5移动端时候，发现overflow: hidden;在安卓微信页面失效问题，经研究和实验，用第三种方法和第四种方法可以解决！ 1、完全隐藏 在里加入scroll="no"，可隐藏滚动条； 2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示； 3、样式表方法 在里加入style="overflow-x:hidden"，可隐
overflow:hidden真的失效了吗
voice的前端旅程
01-04 1269
项目中常常有同学遇到这样的问题，现象是给元素设置了overflow:hidden，但超出容器的部分并没有被隐藏，难道是设置的hidden失效了吗？ 其实看似不合理的现象背后都会有其合理的解释。 我们知道，overflow属性值有这几种： visible：声明内容不会被剪裁。比如内容可能被渲染到容器外面。 hidden：声明内容将被剪裁，并且也甭想使用滚动条来查看剪裁掉的内容。 scr
在移动端，body:overflow 无效的问题
小利的博客
11-28 9767
在手机浏览器上，给body增加overflow:hidden;width:100%;height:100% 无效的问题。在网上找了几种解决办法1、body加position:fixed; —-可行2、给要滚动的元素添加一个父级，设定高度，overflow：auto；3、html,body{height:100%;overflow:hidden}后两种没有实验 ，不知道可行不可行。
iframe双滚动条 解决方式 CSS3 overflow-y 属性
北京-星辰
11-03 4239
 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话： div { overflow-y:hidden; } div { width:110px; height:110px; border:thin solid black; overflow-x:hidden; overflow-y:hidden; }
如何让 height:100%; 起作用
u013681996的专栏
12-05 696
当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？ 按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向
<!DOCTYPE html> 设置百分比高度的问题
Young_Gao的博客
09-08 679
<!DOCTYPE html> 设置百分比高度的问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值