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 + 200console.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; }