隐藏滚动条overflow-y:hidden 不滚动问题解决

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

本文介绍了一种使用CSS实现页面滚动而隐藏滚动条的方法。通过设置父元素overflow:hidden及子元素overflow:scroll，可有效隐藏y轴滚动条，但需注意父元素需设定高度或最小高度。

一般想要页面滚动又不想出现滚动条，网上大多回答是overflow-y:hidden,然而我发现并没卵用，反而造成页面无法滚动。要想真正实现效果，可以给父元素overflow:hidden 然后子元素设置overflow:scroll就能隐藏y轴的滚动条，但是x轴的还会出现。需要注意的是父元素需要设置高度或最小高度，否则会失效

精选资源
css设置Overflow实现隐藏滚动条的同时又可以滚动
01-19
css设置Overflow实现隐藏滚动条的同时又可以滚动，具体代码如下所示： .scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; padding: 0 0.1rem...
JVM内存溢出类型解析与预防
我是Java程序员廖志伟，感谢朋友们的支持！不定期贡献一篇高品质、过万文字、图文并茂且附有视频解说、满载代码示例注释的良心之作，坚决杜绝粗制乱造。
09-12 644
在当今的软件开发领域，Java虚拟机（JVM）作为Java程序运行的核心环境，其内存管理机制至关重要。然而，在实际应用中，由于对JVM内存管理的不当使用，内存溢出问题时常发生，严重影响了系统的稳定性和性能。为了更好地理解和应对这一问题，本文将深入探讨JVM核心知识点之内存溢出类型。想象一下，一个大型企业级应用，其业务逻辑复杂，数据量庞大。在长时间运行的过程中，若系统内存管理不当，可能会导致内存泄漏、对象无法被垃圾回收等问题，最终引发内存溢出错误。
CSS中overflow隐藏、滚动条、换行等用法
热门推荐
xiaokangmiclong的博客
12-18 1万+
div
告别内容溢出烦恼：Tachyons overflow类的滚动控制实战指南
gitblog_00184的博客
10-15 630
你是否还在为网页内容溢出边界而烦恼？是否想让不同屏幕尺寸下的滚动行为更加智能？本文将系统讲解Tachyons中[overflow模块](https://link.gitcode.com/i/079cbc31ff713809c229928c042451a8)的全部用法，通过12个实用场景示例，帮助你在5分钟内掌握内容溢出的完美解决方案。读完本文你将学会：基础溢出控制四件套、轴方向精准控制技巧、响应式...
overflow-y:hidden
seimeii的博客
09-28 1372
overflow-y:hidden
css溢出属性：overflow属性介绍
YY的博客
09-08 1万+
text-overflow、overflow：hidden、overflow：scroll、overflow：auto
div包裹页面后多余部分没有显示，也没滚动条 overflow 属性设置
weixin_34221073的博客
03-25 1084
今天弄个div套着一个页面结果那个页面超出范围后页面没有滚动条可以滚动浏览下面的内容，原来是设置了overflow的hidden属性 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被...
css 样式设置了overflow-y: scroll； 如何隐藏滚动条
weixin_56270315的博客
04-11 1042
在设置overflow-y: scroll;容器外在套一个盒子 设置 overflow: hidden;然后设置要滚动的容器。
CSS 实现隐藏滚动条同时又可以滚动
dianni7443的博客
03-02 2029
移动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？ 使用overflow:hidden隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar。 应用如下 CSS 可以隐藏滚动条： .element::-webki...
#scoll { overflow-y: auto; overflow-x: hidden; max-height: 400px; } #image_scroll { overflow-y: auto; overflow-x: auto; max-height: 400px; }如何合并 提高利用率
11-23
/* 隐藏水平滚动条 */ } #image_scroll { overflow-x: auto; /* 水平溢出时显示滚动条 */ } ``` ### 优化说明： 1. **复用率提升** 将共有的 `overflow-y: auto` 和 `max-height: 400px` 合并到群组选择器，...
overflow-y: hidden;
最新发布
12-26
- **滚动条隐藏技巧**：若需在容器内隐藏滚动条但保留滚动功能，可嵌套两层容器（外层 `overflow: hidden;`，内层 `overflow-y: scroll;` 并调整尺寸）。 如需进一步优化或解决特定问题，可结合具体场景调整。
overflow-x: hidden; overflow-y: auto;这个是什么意思？
09-09
- `overflow-x` 和 `overflow-y` 同时设置时，如果其中一个为 `hidden`，另一个为 `auto` 或 `scroll`，在某些浏览器中可能会导致**滚动条始终显示**。 - 如果你希望滚动条**只有在内容溢出时才显示**，使用 `auto` ...
overflow-y: hidden;可以用css隐藏滚动条吗
05-31
这会阻止用户在垂直方向上滚动该元素的内容，并隐藏滚动条。需要注意的是，这并不会影响水平滚动条。如果需要同时隐藏水平和垂直滚动条，可以使用以下代码： ``` overflow: hidden; ``` 这将同时隐藏元素的水平和...
设置overflow-y: hidden；时 x轴即使设置visible，也还是会被裁剪
qq_35176319的博客
02-22 1428
overflow-y: hidden 导致 x 轴也被裁剪
overflow-y:hidden；overflow-x:auto；无效？
seimeii的博客
09-30 397
注意：子元素不能浮动； 父元素不能使用display：flex; 还有一种情况：就是自动换行了，，，试着加个white-space:nowrap;
使用overflow-y属性,实现可以滚动但滚动条隐藏
小柠檬爱编程
09-10 1万+
只需要加一个css样式即可 .div { height: 300px overflow-x: hidden; overflow-y: auto; } .div::-webkit-scrollbar { display: none; }
怎么在overflow-y:sroll的情况下 隐藏滚动条
weixin_30687051的博客
07-10 2795
当我们的内容超出了我们的div，往往会出现滚动条，影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。 这里介绍一个简单的方法。 大体思路是在div外面再套一个div。这个div设置overflow:hidden。 而内容div设置 overflow-y: scroll;over...
实现CSS隐藏滚动条并可以滚动内容
dengla6847的博客
09-18 3440
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。 方法1：计算滚动条宽度并隐藏起来 在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。· 下面给一...
css隐藏滚动条，并解决在IOS滚动不流畅的问题
qq_40292654的博客
06-30 4591
在移动端页面显示时，为了美观，我们一般会把overflow-x,overflow-y滚动条隐藏起来。.element{ overflow-x:scroll; overflow-y:auto; }温馨提示：一般在用到overflow-x,overflow-y的任意一个时，都建议把另外一个一起写上。隐藏滚动条一般主要是用到:.element::-webkit-scrollbar {disp...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值