隐藏iframe滚动条

最新推荐文章于 2025-06-18 11:55:40 发布

原创最新推荐文章于 2025-06-18 11:55:40 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决iframe内页面出现滚动条的问题，提供了两种方案：一是调整子页面的高度以适应iframe的高度；二是通过CSS样式来隐藏滚动条，同时保持原有内容布局不变。提供了具体的CSS代码示例。

iframe会出现滚动条是因为子页面内容过长，所以想让页面不出现滚动条有两种方法：

一、让子页面高度不超过屏幕高度，这样会修改原本写好的页面布局。

二、修改滚动条样式，使其滚动条视觉上隐藏

::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        ::-webkit-scrollbar-thumb{
            background-color: #999;
            -webkit-border-radius: 5px;
            border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb:vertical:hover{
            background-color: #666;
        }
        ::-webkit-scrollbar-thumb:vertical:active{
            background-color: #333;
        }
        ::-webkit-scrollbar-button{
            display: none;
        }
        ::-webkit-scrollbar-track{
            background-color: #f1f1f1;
        }

这段代码要写在子页面中，如果每个页面都引入了公共css样式文件，可以写在公共文件里面，更方便。