iframe+vue修改滚动条样式
iframe修改滚动条样式因为用iframe来展示第三方网页,所以无法修改里面的滚动条样式,于是想到获取第三方网页的高度,然后赋值给iframe标签,使iframe高度自适应,然后在最外层放一个div,通过设置div的高度和滚动条样式达到类似效果。<div class="input-box-iframe"><iframe :src="result" id="iframe" :he
·
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;
}
更多推荐
已为社区贡献1条内容
所有评论(0)