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; }

iframe+vue修改滚动条样式相关推荐

vue修改滚动条样式的方法
这篇文章主要介绍了vue修改滚动条样式,首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar.下面来看看文章内容的具体实现吧目录首先要知道,修改滚动条样式,利用伪元素-webk ...
vue修改滚动条样式
/deep/ ::-webkit-scrollbar {/* 滚动条整体样式 */width: 6px;/* 宽高分别对应横竖滚动条的尺寸 */background: rgb(235, 238, 24 ...
修改滚动条样式的方法
篇文章主要介绍了vue修改滚动条样式,首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar.下面来看看文章内容的具体实现吧首先要知道,修改滚动条样式,利用伪元素-webkit-s ...
iframe修改滚动条样式
** iframe修改滚动条样式 ** 1.引入后添加iframe页面或url 2.*如对本身自带的滚动不满意可到引入源文件进行添加样式
vue、css修改滚动条样式
vue.css修改滚动条样式样式为 /* 滚动条 */ body *::-webkit-scrollbar {width: 10px;height: 10px; } body *::-webkit- ...
php form 添加滚动条,element 使用总结(1. tree使用 2. table修改滚动条样式 3. el-form 自定义label添加icon)...
一, vue_elementUI_ tree树形控件 1.默认点击tree节点的第一个(注意不是checked选中) @node-drop="handleDrop"ref=&qu ...
php怎么修改滑动条,修改滚动条样式的方法
这次给大家带来修改滚动条样式的方法,修改滚动条样式的注意事项有哪些,下面就是实战案例,一起来看一下. 支持360极速 chrome firfox 不支持ie9/*滚动条样式*/::-webkit-sc ...
HTML 修改滚动条样式
修改滚动条样式给一个 div 设置 .orgs-container {max-height: 378px;height: 378px;overflow-y: auto;} Mac 上面的滚动条样式 ...
Ant Design Table修改滚动条样式
Ant Design Table修改滚动条样式目录一.目的二.步骤 1.了解滚动条的组成部分 2.样式修改 3.实现效果二.总结目录一.目的修改Ant表格的固定列滚动而产生的滚动条样式, ...

iframe+vue修改滚动条样式

iframe修改滚动条样式

iframe+vue修改滚动条样式相关推荐

最新文章

热门文章