移动端给body设置overflow:hidden失效的问题

最新推荐文章于 2024-06-14 19:42:07 发布
原创 最新推荐文章于 2024-06-14 19:42:07 发布 · 3.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在移动端开发中遇到的body设置overflow:hidden;宽度及高度为100%无效的问题，并提供了三种有效的解决方法，包括使用position:fixed;、添加额外的父级元素以及调整html和body的样式。

在移动端，给body增加overflow:hidden;width:100%;height:100% 无效的问题。在网上找了几种解决办法

1、body加position:fixed; —-可行

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

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


我这里是限制x轴上不能滑动，因此用的是第三种方法

Css：overflow: hidden截断条件‌及如何避免截断
q1003675852的博客
04-01 2013
本文主要讨论了overflow: hidden截断条件‌及如何避免截断
容易被误解的overflow:hidden
新博客地址：blog.songchunmin.com
12-24 1429
为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的。 网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度（或高度）可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时，都认为overflow:hidden造成了特殊情况下的麻烦。但如果认真阅读一下css规范，会
有关给body设置overflow无效的问题
m0_53438035的博客
04-15 1904
有关给body设置overflow无效的问题 最近写代码时发现给body设置overflow:hidden无效。 css： html { /* overflow: auto; */ } body { height: 50vh; overflow: hidden; /* overflow-y: auto; */ } </style> html: <body> <img src
css禁止滑动页面_CSS禁止移动端弹出层后底层滑动
weixin_30722051的博客
02-01 1844
[摘要]在开发移动端项目的时候，有时候会遇到弹出层下方的内容随滑动滚动的情况，我们可以通过css来控制，让体验更合理。在开发移动端网站的时候，我们经常会遇到弹出层的情况(如全屏的导航栏、提示遮罩等)，这时候会有一个用户体验上的小bug：当我们操作点出弹出层时，如果此时滑动屏幕，你会发现弹出层下面的内容依然会上下滚动；特别是弹出层是导航列表等较长需要上下滑动的区块时，你会发现弹出层和底层有时会一起滚...
html body overflow,关于在移动端 body overflow：hidden 无效的问题
weixin_39620370的博客
06-29 886
关于在移动端 body overflow：hidden 无效的问题一、简述这篇文章作为一道前菜哈。很多同学在做移动端的时候都有遇到移动端各种坑，各种固定fiexd失效，input输入框错位，软键盘弹出错位等等….但是，在做一张单页面的页面时，尤其是以整个页面去加载背景图片的时候，背景图片固定就很有必要了。这里先讨论一下body关于overflow的问题，移动端固定的问题会在下一篇文章讨论。二、简单...
在td中设置overflow:hidden无效的解决办法
丑小鸭变黑天鹅的博客
04-16 1838
在td中设置overflow:hidden无效的解决办法一、问题描述二、解决办法 一、问题描述 最近做项目的时候，需要一个表格去展示数据。其实是很简单的一个业务，但是今天碰到了一点小问题。就是当td中的内容太多的时候，我不想让其换行，也不想让其显示的特别长。所以就想到咋们常用的一种方法，设置其不换行，移除部分隐藏，然后用省略号代替移除部分。具体就这三行代码。 white-space: nowrap; /*规定段落的文本不进行换行*/ overflow: hidden; /*超出隐藏*/ text-
一个通俗小故事告诉你溢出隐藏（overflow:hidden）失效的原因
09-25
【溢出隐藏（overflow:hidden）失效的原因】 在Web开发中，`overflow:hidden`是一个常见的CSS属性，用于控制...在实际项目中，遇到此类问题时，应仔细检查元素的样式设置，找出导致`overflow:hidden`失效的根本原因。
el-image点击图片预览body增加了overflow: hidden;导致内容偏移
最新发布
07-31
我们遇到的问题：当使用Element UI的el-image组件进行图片预览时，预览组件会给body添加overflow: hidden样式，导致页面内容突然偏移（滚动条消失引起的跳动）。 解决方案思路： 1. 在预览打开时，给body添加一个...
父元素有overflow: hidden，有影响吗？
06-27
当父元素同时设置以下属性时，会创建新的层叠上下文，导致 `fixed` 定位失效： ```css .parent { overflow: hidden; /* 关键属性 */ position: relative; /* 或 absolute/fixed */ border-radius: 25px; /* 非...
移动端滑动穿透解决方案：从overflow到touchmove
将body的overflow设置为hidden可以防止内容溢出，理论上能解决页面滚动。在PC端，这个方法确实有效，但在移动端，由于滚动行为的特殊性，这种方法往往无法达到预期效果。 接着，开发者尝试将body设置为绝对定位...
iScroll版本
weixin_42235173的博客
06-05 346
版本 针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。 目前我们有以下版本： iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。 iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又...
设置overflow:auto无效的解决办法(避坑)
hellozhxyuan
06-15 3169
做项目避免不了使用overflow 但是设置了之后是无效的 这个时候要查看所在的元素是否的父元素是否在所在元素 给父级添加属性 注：宽高大于父级元素的宽高
Html table td里使用overflow:hidden无效解决方法
热门推荐
ajoashop的博客
04-27 1万+
在表格里经常用到溢出隐藏，溢出省略，发现直接在td标签里使用overflow:hidden有时无效。 如果遇到这种情况，尝试两种方式可以解决： table td使用overflow:hidden无效解决方法：  解决方法一： 在table里使用table-layout:fixed;   table-
【问题解决】body设置overflow：hidden之后移动端还是可以滑动
kodmoqn的博客
10-02 796
【问题解决】body设置overflow：hidden之后移动端还是可以滑动
使用html+css写的h5移动端的页面会产生左右晃动不固定问题，解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题
qq_32849999的博客
09-20 1万+
1、使用html+css写的h5移动端的页面会产生左右晃动不固定的时，给父级加 overflow-x：hidden属性 2、解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题 解决方法为： 在body体内设置固定定位，top为0，left为0即可，同时设置html标签overflow:hidden; body{ position:fixed; to...
移动端开发（一）：解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题
top_liqian的博客
10-25 7089
解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题   解决方法为：   在body体内设置固定定位，top为0，left为0即可，同时设置html标签overflow:hidden; body{ position: fixed; top: 0; left: 0; width: 100%; heig
UniApp 中去掉 body 中的 style=“overflow: hidden；“ 样式
m0_38007556的博客
06-14 789
【代码】UniApp 中去掉 body 中的 style=“overflow: hidden；“ 样式。
html切换到手机时隐藏,html页面调到手机自适应之后html，body的overflow=‘hidden’不起作用了。...
weixin_39745724的博客
06-04 224
html页面调到手机自适应之后html，body的overflow=‘hidden’不起作用了。经过调试看见overflow='hidden'是生效的，但是网页有横向滚动条，可以拖动。就像下面的图片：相关代码MenuHomeDating SitesBi-StoriesForums Bicurious DatingDating TipsBlogSubscribehtml,body{ma...
[vue] -- 使用自定义指令解决部分ios系统无法直接使用overflow：hidden解决弹出弹窗遮罩时滚动穿透的问题
杜
07-12 824
dialog滚动条滑动当前页面影响到底层页面的滑动，网上的解决思路大多是，添加overflow：hidden。但是无论怎么修改，都无法适配。怀疑人生。 后来换了一种思路，发现部分ios系统不适用于此方案。 于是通过全局自定义指令v-fixed，来解决这个问题。 即：使用当弹窗出现的时候将页面body的position设置为fixed并记录此刻滚动的位置,弹窗消失去除position属性 import Vue from 'vue' Vue.directive('fixed', { inse
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值