zoukankan      html  css  js  c++  java
  • iframe内部内容在浏览窗口位置固定的问题

    需求场景:

    1. 父页面A 包含有iframe页面B,
    2. 页面B内容很长,浏览器一两屏不能显示全,需要滚动显示。
    3. 当浏览器滚动的时候,iframe B页面中的某一内容不能需要固定在窗口的某一位置。如下图中的 回到顶部按钮。

    解决思路:

    1. iframe子页面初始化时重新定义top窗口的onscroll事件函数
    2. onscroll事件函数中获取相关父页面的clientHeight等参数,根据clientHeight及scrollTop的值重新设置 需要固定显示的div的top、left值。

    简单实现:

    iframe 页面内的相关代码如下:

    setWindowScrollTop 中高度加100是父页面与iframe B页面顶部的间距

    <div id="id_return_top" style="position:absolute;top: 158px; left: 245px;">

        <a href="javascript:setScrollTop(0);" class="return_btn"></a>

    </div>

    <script type="text/javascript">

        top.window.onscroll =  function()

        {

            var windowHeight = getWindowHeight(self)-150;

           

            var lvTop=parseInt(getWindowHeight(top))+parseInt(getWindowScrollTop(top))-250;

            lvTop = lvTop<=0?1:lvTop;

            lvTop = lvTop>windowHeight?windowHeight:lvTop;

       

            document.getElementById("id_return_top").style.top=lvTop+"px";

            document.getElementById("id_return_top").style.left="245px";

        }

    </script>

    获取window 的height及scrollTop的相关js代码:

    function getWindowScrollTop(win){

             var scrollTop=0;

             if(win.document.documentElement&&win.document.documentElement.scrollTop){

                       scrollTop=win.document.documentElement.scrollTop;

             }else if(win.document.body){

                       scrollTop=win.document.body.scrollTop;

             }

             return scrollTop;

    }

    function getWindowHeight(win){

             var clientHeight=0;

             if(win.document.body.clientHeight&&win.document.documentElement.clientHeight){

                       clientHeight = (win.document.body.clientHeight<win.document.documentElement.clientHeight)?win.document.body.clientHeight:win.document.documentElement.clientHeight;

             }else{

                       clientHeight = (win.document.body.clientHeight>win.document.documentElement.clientHeight)?win.document.body.clientHeight:win.document.documentElement.clientHeight;

             }

             return clientHeight;

    }

     

  • 相关阅读:
    P7276-送给好友的礼物【dp】
    P4831-Scarlet loves WenHuaKe【组合数学】
    CF461D-Appleman and Complicated Task【并查集】
    P6499-[COCI2016-2017#2]Burza【状压dp】
    CF757F-Team Rocket Rises Again【最短路,DAG支配树】
    Loj#6053-简单的函数【Min25筛】
    P5325-[模板]Min_25筛
    2019.10.6 机房训练赛
    [CSP校内集训]v(记忆化搜索+map优化状压)
    [CSP校内集训]ac(树上启发式合并)
  • 原文地址:https://www.cnblogs.com/zhanghairong/p/2585301.html
Copyright © 2011-2022 走看看