iframe去滚动条仍可滑动实例

最新推荐文章于 2021-02-21 17:18:38 发布

qiancheng2019

最新推荐文章于 2021-02-21 17:18:38 发布

阅读量554

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： html vue.js

本文链接：https://blog.youkuaiyun.com/qiancheng2019/article/details/111583488

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种通过CSS样式隐藏iframe内的滚动条同时保持其可滚动性的方法。通过将滚动条遮盖并调整主页面布局，可以实现美观且兼容性强的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iframe去滚动条仍可滑动实例

给滚动条加各种样式有很多兼容性问题，而且还达不到效果，
应用技巧把滚动条遮盖住就可以简单的达到效果，然后再调整下主页面左右距离就好。

 <div class="iframe-wrap">
        <iframe src="https://www.baidu.com/" frameborder="0"   width="100%" height="400px" />
</div>

.iframe-wrap{
    position: relative;
    overflow: hidden;
    width: 380px;
    height: 450px;
}

iframe{
width: 100%;
border: none;
position: absolute;
right: -20px;
top: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}