iframe+vue修改滚动条样式_vue的iframe增加滚轮-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44364001/article/details/121224980

该博客探讨了如何在iframe中展示第三方网页时，因权限限制无法直接修改iframe内滚动条样式的问题。作者提出了一种解决方案：通过监听iframe加载完成，获取第三方网页高度并动态设置iframe的高度，然后在外层div上应用自定义滚动条样式，从而达到预期效果。这种方法确保了滚动条的美观性和页面的适配性。

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

iframe修改滚动条样式

因为用iframe来展示第三方网页，所以无法修改里面的滚动条样式，于是想到获取第三方网页的高度，然后赋值给iframe标签，使iframe高度自适应，然后在最外层放一个div，通过设置div的高度和滚动条样式达到类似效果。

<div class="input-box-iframe">
            <iframe :src="result" id="iframe" :height="height" width="1000" scrolling="no" name="demo"  @load="loaded"></iframe>
</div>

监听iframe是否加载完毕

mounted() {  
        const iframe = document.querySelector('#iframe')
        if (iframe.attachEvent) {
            iframe.attachEvent('onload', function () {
            // iframe加载完毕以后执行操作
            console.log('iframe已加载完毕',document.getElementsByTagName('iframe')[0])
         })
        }else {
            iframe.onload = function () {
                setTimeout(()=>{
                    //获取第三方页面的高度
                    console.log('iframe已加载完毕!',document.getElementsByTagName('iframe')[0].ownerDocument.body.clientHeight)
                    this.height = document.getElementsByTagName('iframe')[0].ownerDocument.body.clientHeight + 200
                console.log(document.getElementsByTagName('iframe'));
                },1000)
            }
        }
        },

设置滚动条样式和外层div样式

::-webkit-scrollbar-thumb {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: .375rem;
    background-color: rgba(144,147,153,.3);
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    }
    ::-webkit-scrollbar {
        width: .625rem;
        height: .625rem;
    }
    .input-box-iframe{
        width: 1000px;
        height: 600px;
        overflow-y: scroll;
        overflow-x: hidden;
        margin: 0 auto;
        margin-bottom: 1.25rem; 
    }