JQuery 獲取元素到瀏覽器可視窗口邊緣的距離

獲取元素到瀏覽器可視窗口邊緣的距離

 

by:授客 QQ：1033553122

1. 1.   測試環境

JQuery-3.2.1.min.js

下載地址：

https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js

 

Bootstrap-3.3.7-dist

下載地址：

https://gitee.com/ishouke/front_end_plugin/blob/master/bootstrap-3.3.7.zip

 

win7

 

1. 2.   需求場景

實現需求：如下，獲取tab標簽頁到頁面底端的距離

 

 

前提：tab標簽元素自身不攜帶滾動條

 

1. 3.   HTML代碼片段

<div id="tabContent" class="tab-content">

    <!--通過js獲取 tab對應的頁面內容-->

    <div id="tab-content-80" role="tabpanel" class="tab-pane">

        <iframe name="tabIframe" id="ifm80" src="/platform/page/resourceSetting.html" width="100%"   frameborder="no"

                border="0"

                marginwidth="0"

                marginheight="0"

                scrolling="yes"

                allowtransparency="yes"

                onload="changeFrameHeight()">

        </iframe>

    </div>

    <div id="tab-content-117" role="tabpanel" class="tab-pane active">

        <iframe name="tabIframe" id="ifm117" src="/platform/page/roleSetting.html" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" onload="changeFrameHeight()">

        </iframe>

    </div>

</div>

 

 

1. 4.   JS代碼實現

/**

 * 設置tab標簽頁對應的頁面內容高度

 */

function setTabPageContentHeight() {

    var contentContainer =  $('#tabContent '); // 獲取tab標簽對應的頁面div容器對象

    var elementHeight = contentContainer.height();  //容器對象自身高度（如果頁面剛加載完，這時還沒打開tab頁，會出現容器高度為0的情況

    var offsetTop = contentContainer.offset().top;  //容器距離document頂部的距離

    var scrollHieght = $(document).scrollTop();  // 滾動條高度

    var windownHeight = $(window).height();   //瀏覽器可視窗口的高度(不包括內邊距、邊框和外邊距) 

    // 獲取tab頁面內容容器高度

    var h = windownHeight - (offsetTop-scrollHieght) - elementHeight;

}

 

注意：當改變瀏覽器窗口高度時，$(window).height() 會隨之動態改變

 

 

1. 5.   參考鏈接

http://blog.sina.com.cn/s/blog_141f2f34a0102vmxh.html

https://segmentfault.com/q/1010000009247077