移动端禁止上下滚动css设置方式记录

最新推荐文章于 2025-04-16 10:30:32 发布
原创 最新推荐文章于 2025-04-16 10:30:32 发布 · 8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#移动端 #css #禁止滚动

博客介绍了在移动端使用CSS禁止页面滚动的方法，通过设置html和body的样式，将overflow属性设为hidden，height属性设为100%来实现。 
html,body{
  overflow: hidden;
  height: 100%;
}

使用CSS实现上下滚动
TechCraze的博客
10-03 1140
这是一个简单的实现上下滚动的示例，您可以根据您的实际需求进行修改和扩展。通过调整容器的高度、添加更多内容或使用其他CSS属性，您可以进一步定制滚动效果，以满足您的设计要求。在上面的示例中，我们首先创建了一个名为"scroll-container"的类，用于定义包含滚动内容的容器元素的样式。您可以根据需要添加、删除或修改这些元素，以适应您的实际需求。首先，让我们创建一个HTML文件，其中包含一个具有滚动内容的容器元素。保存上述代码为一个HTML文件，并在浏览器中打开它，您将看到一个具有滚动效果的容器。
前端页面双向滚动方案
淘系技术
06-29 1294
脱离canvas后，页面如何实现上下左右双滑动？又如何在安卓系统和iOS系统上实现？背景在许多业务场景中会遇到让一个页面在web端可以实现双向滚动，且在滚动的时候可以上部吸顶，左侧吸在最左...
移动端左右滑动时，屏蔽上下滑动
weixin_42349568的博客
05-30 1817
一，现象 顶部有轮播图(左右移动)，页面还包含上下移动滚动条。当我们斜滑页面，页面也会斜着运动，即触发了左右移动事件又触发了上下移动事件。 二，解决方案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
12-09
CSS中"overflow:scroll"默认是左右，上下都滚动 如何设置成：当长度超出DIV长度的时候，只有上下滚动，左右无论超出多长都不滚动，也不会出现下面的滚动杆？ 如果左右没有超出内容时，用overflow:auto; 如果左右有超出内容，用overflow-x: hidden; 不过IE本身也是有问题的：在设置Frame时，有一属性是scrolling="yes/no/auto"，IE6的Mozilla都支持，但很显然地，IE的开发人员在这个地方懒了一下，他们对auto的理解很不人性化。auto的意思是自动，就是要的时候有，不要的时候没有。但如果设成auto，则在网页过长需要出竖起滚
CSS 页面禁止滚动
前端小胡兔的博客
06-29 4736
CSS 页面禁止滚动
css禁止页面滚动
syqlbb520的博客
12-21 4912
禁止页面滚动,在body层设置参数:html,body{ height:100%; overflow:hidden; }
vue禁止滚动条上下滑动
12-28
### Vue 中禁止页面上下滚动条滑动 为了实现在 Vue 项目中禁用页面的上下滚动功能，可以采用多种方式来处理不同场景下的需求。 #### 方法一：通过控制 `document.body` 的样式属性 当弹层显示时调用函数停止页面...
移动端 H5 开发指南 涉及html、css、js三大方向
愿你走过半生，归来任是少年。
04-17 796
与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。但本文记录的「40条坑位」绝对能让同学们少走很多弯路，特别是前端小白。
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
10-15
在微信小程序中，实现单个卡片左滑显示按钮并防止上下滑动干扰的功能是一项常见的交互设计，这在很多移动端应用中都有所应用，比如模仿iOS微信的置顶、删除按钮等。这一功能主要依赖于微信小程序提供的事件处理API，...
H5端禁止蒙层底部页面跟随手势滚动
JUSTIN的博客
06-25 2733
(一) 前言 说来真是搞笑，之前很多交互都是依赖UI库的modal实现，之前也遇到过类似天猫商品列表页面那种下拉筛选，也解决过相关手势问题，但是，后面一个同事再次问起这个问题，回头去总结下，发现之前通过选取dom并为背景和内容分别处理touchmove事件，但是这仅仅是对于h5的一个解决方案，所以总结常见在pc/h5上面分别的处理方案。 (二) PC处理方案 打开蒙层时，给body添加样式： ov...
css样式 防止页面滚动
最新发布
xiaoxingxing__1的博客
04-16 438
写圆角边框的时候加上overflow: hidden，要不然可能起不到圆角效果，还是原来的方形。
移动端禁止页面滚动
weixin_42526051的博客
05-20 401
移动端禁止页面滚动 实现方式：禁止touch事件 ```javascript //禁止滚动 document.body.addEventListener('touchmove', function (e) { e.preventDefault(); }, { passive: false }); //passive 参数不能省略，用来兼容ios和android //允许滚动 document.body.addEv
CSS自定义弹窗如何禁用遮罩层滚动条？用CSS禁用滚动穿透。
qq_33820780的博客
12-28 1581
/ 页面最外层元素.wrap {
禁止页面滚动移动端
weixin_50699135的博客
05-29 202
stop () { var mo = function (e) { e.preventDefault() } let cssStr = 'overflow-y: hidden; height: 100%;' document.getElementsByTagName('body')[0].style.cssText = cssStr document.documentElement.style.height = '100%' ..
css禁止滑动页面_禁用滚动，但保持滚动条CSS
weixin_32297123的博客
12-23 905
I can't find a solution to this, there was a question over here, but the answers are not very usable (at least for me).I have a JavaScript modal pop-up that disables everything on the background by pl...
移动端开发，禁止屏幕的滚动
xkqbaiyuan的博客
12-05 491
手机端出现弹框后，禁止页面的滚动。 移动端使用e.preventDefault()禁止滚动及取消,兼容苹果 原文链接 //实现滚动条无法滚动 var mo=function(e){e.preventDefault();}; /***禁止滑动***/ function stop(){ document.body.style.overflow='hidden'; ...
内容超出的问题
weixin_30481087的博客
11-14 928
CSS 禁止滚动条，有4种方法，具体如下： 1、完全隐藏 在<boby>里加入scroll="no"，可隐藏滚动条； <boby scroll="no"> 2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条； 反之，则显示； <boby scroll="auto"> 3、样式表方法 在<boby>里...
CSS 禁止滚动条
pyzheng的专栏
08-11 910
[url]http://www.lunelove.com/david/Article.asp?ItemID=92[/url] 1、完全隐藏 在里加入scroll="no"，可隐藏滚动条； 2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示； 3、样式表方法 在里加入style="overflow-x:hidden"，可隐藏水平滚动条； 加入...
CSS禁止滚动条
weixin_30607029的博客
05-20 1011
CSS禁止滚动条的方法： 1、完全隐藏 在<boby>里加入scroll="no"，可隐藏滚动条； <boby scroll="no"> 2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条； 反之，则显示； <boby scroll="auto"> 3、样式表方法 在<boby>里...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值