您现在的位置是:网站首页> 编程资料编程资料
移动端设置了overflow:hidden页面还会滚动的禁止方法使用overflow: hidden来禁用页面滚动条
2021-09-04
805人已围观
简介 今天在工作中碰到了一个很尴尬的问题,下面这篇文章主要给大家介绍了关于移动端设置了overflow:hidden,但页面依然还会滚动的禁止方法,文中通过示例代码介绍的非常详细,需要的朋友们可以参考借鉴,下面来一起看看吧。
前言
本文主要给大家介绍了关于在移动端设置了overflow:hidden页面还会滚动的禁止方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
如果把 overflow:hidden 用在 body 标签,移动端浏览器依然能滚动,因为移动端是基于touch事件,解决方法有两个。

方法一:
将要隐藏滚动的内容加上一个包裹层div,然后给这个div设置高度为window.height() ,并且 overflow:hidden 就可以解决你的问题。
方法二:
给 body 添加 position:fixed; 示例:
body { overflow:hidden; position:fixed; left:0; top:0; }总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
相关内容
- CSS实现梯形标签页的方法CSS DIV制作梯形状的不规则网站导航-CSS教程-网页制作-网页教学网
- 详解如何编写高效的 CSS 选择符
- 浅谈styled-components的用法CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- CSS3制作酷炫的条纹背景CSS3条纹背景制作的实战攻略
- css3实现文字扫光渐变动画效果的示例CSS3下的渐变文字效果实现示例css 进度条的文字根据进度渐变的示例代码CSS3文字背景色渐变过渡特效源码CSS实现文字高光水波渐变的动态效果实例一款纯css3实现的颜色渐变按钮的代码教程使用CSS3的背景渐变Text Gradient 创建文字颜色渐变CSS 网页文字渐变效果css实现文字颜色渐变的三种方法
- css3实现画半圆弧线的示例代码css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 浅谈CSS3鼠标移入图片动态提示效果(transform)css3+伪元素实现鼠标移入时下划线向两边展开的效果纯css写的评分鼠标移入的效果附图纯CSS实现商品图片点击放大效果CSS实现鼠标移入时图片的放大效果及缓慢过渡效果的示例代码
- 浅谈css sticker-footer 布局详解css布局实现左中右布局的5种方式CSS实现多行多列的布局的实例代码css Flex布局的可伸缩性(Flexibility)浅谈css网页的几种布局如何理解 CSS 布局和块级格式上下文详解使用CSS3的@media来编写响应式的页面 CSS布局方案小结
- 详解Sticky Footer 绝对底部的两种套路 CSS Sticky Footer 几种实现方式CSS Sticky Footer实现代码CSS实现Sticky Footer的示例代码详解CSS经典布局之Sticky footer布局css sticky footer经典布局的实现
- 通过CSS的滤镜实现火焰效果的示例CSS3 实现的火焰动画CSS3实现文字浮雕效果,镂刻效果,火焰文字如何通过 CSS 写出火焰效果
