父页面使用iframe嵌子页面时使子页面弹框适应父页面滚动像素

最新推荐文章于 2021-08-27 13:59:01 发布

四玺丸子炸鸡块

最新推荐文章于 2021-08-27 13:59:01 发布

阅读量476

点赞数 1

分类专栏：前端文章标签： html javascript

本文链接：https://blog.csdn.net/qq_34420739/article/details/114673553

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

使用el-dialog的top属性
效果如下：
在这里插入图片描述

在这里插入图片描述

当滚动条拖动过iframe之前的区域高度时，dialog的top值设置为滚动条像素值-区域高度的值
x=父页面高度=parent.document.body.offsetHeight
y=滚动条像素高度=parent.window.pageYOffset
b=子页面高度=document.body.offsetHeight=(这里等于1108)
a=A区域高度=x-b

即dialog的top属性设置为：(y-a>0)?(y-a+80):80
（感觉设置80更好看，因此都加了80）
为使子页面单独访问时dialog的显示也正常，再加一个逻辑
((y-a>0)&&(x-b>0))?(y-a+80):80

<el-dialog :visible.sync="dialogVisiable" width="400px" :top="topValue()">
        <div style="width: 300px; height: 300px">彈框</div>
      </el-dialog>

  methods: {
    show: function () {
      this.dialogVisiable = true;
    },
    topValue: function () {
      var x = parent.document.body.offsetHeight;
      var y = parent.window.pageYOffset;
      var b = 1108;
      var a = x - b;
      var t = (y - a > 0 && x - b > 0 ? y - a + 80 : 80) + "px";
      return t;
    },
  },
};