CSS overflow禁止滚动页面

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

#css #overflow

博客展示了一段代码，通过$('body').css('overflow','hidden')来禁止页面滚动，涉及到CSS的overflow属性应用。 
$('body').css('overflow','hidden');//禁止滚动
移动端设置了overflow:hidden页面还会滚动的禁止方法
09-24
今天在工作中碰到了一个很尴尬的问题，下面这篇文章主要给大家介绍了关于移动端设置了overflow:hidden，但页面依然还会滚动的禁止方法，文中通过示例代码介绍的非常详细，需要的朋友们可以参考借鉴，下面来一起看看吧。
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
09-25
如果你只想让元素在垂直方向（即上下）有滚动条，而禁止水平方向（左右）的滚动，你可以结合使用`overflow-y`和`overflow-x`两个属性来实现这一效果。`overflow-y: scroll`确保元素在内容高度超出时显示垂直滚动条，...
移动端（七）overflow 阻止 系统滚动条
libufan的博客
07-14 378
消除系统滚动条 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ht...
css样式 防止页面滚动
xiaoxingxing__1的博客
04-16 482
写圆角边框的时候加上overflow: hidden，要不然可能起不到圆角效果，还是原来的方形。
告别内容溢出烦恼：Tachyons overflow类的滚动控制实战指南
最新发布
gitblog_00184的博客
10-15 630
你是否还在为网页内容溢出边界而烦恼？是否想让不同屏幕尺寸下的滚动行为更加智能？本文将系统讲解Tachyons中[overflow模块](https://link.gitcode.com/i/079cbc31ff713809c229928c042451a8)的全部用法，通过12个实用场景示例，帮助你在5分钟内掌握内容溢出的完美解决方案。读完本文你将学会：基础溢出控制四件套、轴方向精准控制技巧、响应式...
CSS 禁止滚动条
pyzheng的专栏
08-11 929
[url]http://www.lunelove.com/david/Article.asp?ItemID=92[/url] 1、完全隐藏 在里加入scroll="no"，可隐藏滚动条； 2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示； 3、样式表方法 在里加入style="overflow-x:hidden"，可隐藏水平滚动条； 加入...
css禁止页面滚动
syqlbb520的博客
12-21 4916
禁止页面滚动,在body层设置参数:html,body{ height:100%; overflow:hidden; }
css使用overflow属性控制滚动条的样式
09-22
除了基础的`overflow`属性，CSS还允许你自定义滚动条的样式。这通常涉及使用Webkit专有的伪元素（如`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`）来改变滚动条的外观。例如，你可以调整滚动条的颜色、大小...
精选资源
vue中移动端禁止页面滚动
01-20
// 禁止滚动 stop () { var mo = function (e) { e.preventDefault() } let cssStr = 'overflow-y: hidden; height: 100%;' document.getElementsByTagName('body')[0].style.cssText = cssStr document....
使用CSS隐藏元素滚动条的示例代码
11-21
在CSS中，隐藏元素滚动条是一项常见的需求，特别是在设计页面布局时，可能希望保持界面的简洁性。然而，隐藏滚动条并不意味着要牺牲内容的可滚动性。在不同的浏览器中，实现这一目标的方法略有不同。以下是一些关于...
精选资源
弹框后禁止遮罩层后面页面滚动（兼容ios和android）.zip
08-20
"弹框后禁止遮罩层后面页面滚动（兼容ios和android）"这个主题涉及到的是一个常见的问题，即当弹出一个对话框或者遮罩层时，如何防止用户在遮罩层下继续滚动页面。这个问题在iOS和Android平台上表现不同，需要特定的...
使用overflow: hidden来禁用页面滚动条
09-28
禁用页面滚动条的方法有很多，但最简单、最快的也就数overflow: hidden了，下面是禁用html及body滚动条的方法，兼容IE6、7
CSS禁止滚动条
weixin_30607029的博客
05-20 1020
CSS禁止滚动条的方法： 1、完全隐藏 在<boby>里加入scroll="no"，可隐藏滚动条； <boby scroll="no"> 2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条； 反之，则显示； <boby scroll="auto"> 3、样式表方法 在<boby>里...
CSS禁用滚动条
热门推荐
奔跑的QQEE的笔记
04-18 2万+
CSS禁用滚动条 如此设置： body{ overflow-y: hidden; overflow-x: hidden; }
html页面禁止滚动条,css如何不让出现滚动条？
weixin_32083393的博客
06-03 9689
css不让出现滚动条的方法：1、通过overflow属性设置禁止出现滚动条，此方法滚动条不会出现，内容也无法滚动。2、使用伪对象选择器::-webkit-scrollbar设置隐藏滚动条。设置禁止出现滚动条：1、样式表方法在里加入style="overflow-x:hidden"，可隐藏水平滚动条；加入style="overflow-y:hidden"，可隐藏垂直滚动条。被包含页面里加入html ...
内容超出的问题
weixin_30481087的博客
11-14 929
CSS 禁止滚动条，有4种方法，具体如下： 1、完全隐藏 在<boby>里加入scroll="no"，可隐藏滚动条； <boby scroll="no"> 2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条； 反之，则显示； <boby scroll="auto"> 3、样式表方法 在<boby>里...
CSS 页面禁止滚动
前端小胡兔的博客
06-29 4740
CSS 页面禁止滚动
禁止页面滚动的几种方法
文摘资讯
05-25 2701
overflow:hidden您可以使用 CSS 的 overflow:hidden 属性来防止页面在弹出浮层时滚动。具体来说，可以通过以下步骤实现：在HTML的 标签上添加一个类名，例如 no-scroll。使用 CSS 将该类名与 overflow:hidden 属性关联，这将防止页面滚动，同时也会隐藏滚动条，例如：.no-scroll { overflow: hidden; }当弹出浮层...
uniapp打开某个组件时给根页面添加css禁止页面滚动
06-06
### 在 UniApp 中通过组件加载时禁止根页面滚动 在 UniApp 中，可以通过动态添加 CSS 样式来实现禁止根页面滚动的效果。以下是一个完整的解决方案，包括如何在组件加载时触发样式添加，并确保页面滚动被禁用。 #### 1. 禁止页面滚动的 CSS 实现 通过设置 `html` 和 `body` 的 `overflow` 属性为 `hidden`，可以有效禁用页面滚动[^3]。以下是具体的 CSS 样式代码： ```css .no-scroll { overflow: hidden; /* 禁用页面滚动 */ height: 100%; /* 确保页面高度适应屏幕 */ } ``` #### 2. 动态添加和移除样式 在组件加载时，可以通过 JavaScript 动态地为 `html` 或 `body` 添加上述类名。在组件卸载时，再移除该类名以恢复页面滚动功能。 以下是一个示例代码，展示如何在 Vue 生命周期中实现这一功能： ```javascript export default { mounted() { // 组件加载时添加禁止滚动的样式 document.body.classList.add('no-scroll'); }, beforeDestroy() { // 组件销毁时移除禁止滚动的样式 document.body.classList.remove('no-scroll'); } }; ``` #### 3. 防止触摸事件引发滚动 为了进一步确保页面不会因为触摸事件而滚动，可以在 CSS 中使用 `touch-action: none` 来禁用触摸操作引发的滚动行为[^3]： ```css .no-scroll { overflow: hidden; /* 禁用页面滚动 */ height: 100%; /* 确保页面高度适应屏幕 */ touch-action: none; /* 禁用触摸操作引发的滚动 */ } ``` #### 4. 注意事项 - 如果页面中有其他需要滚动的区域（例如 `scroll-view`），应确保这些区域的滚动不受影响。可以通过明确设置 `scroll-view` 的滚动属性来实现[^1]。 - 在某些情况下，可能需要同时禁用 `html` 和 `body` 的滚动，以确保兼容性。 #### 示例完整代码 以下是一个完整的示例，展示了如何在 UniApp 中实现组件加载时禁止页面滚动的功能： ```html <template> <view class="content"> <!-- 组件内容 --> </view> </template> <script> export default { mounted() { document.body.classList.add('no-scroll'); }, beforeDestroy() { document.body.classList.remove('no-scroll'); } }; </script> <style> .no-scroll { overflow: hidden; height: 100%; touch-action: none; } </style> ``` ###
评论 8
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值