關於瀏覽器、屏幕、滾動條的位置與尺寸問題

今天的工作中遇到了相關問題，惡補了一下，覺得以后需要回顧，整理了一下。

一、好用的方法

先說說jQuery中幾種比較好用的方法

1、offset()

獲取或者設置相對於當前視口的相對偏移。可以返回對應的top值和left值。
例如：obj.offset().top 可以獲取dom對象相對於當前視口的top值。
$(“.demo”).offset({ top: 10, left: 30 });
設置class為demo的相對於視口的top值和left值。

2、scrollTop()/scrollLeft()

獲取或者設置取匹配元素相對滾動條頂部/左邊的偏移。

3、width()/height()

取得或者設置匹配元素當前計算的寬度/高度值（px）。
括號里可以傳入具體的值或者function去設置。
舉例：

    function resultDetailIsScroll ($obj) {
    //找到對應的元素            
                var $deom= $obj.find('.deom');
                    //如果 對應的元素在瀏覽器窗口顯示的高度達到一定條件，就設置需要的元素滾動到特定的位置               
                if (($deom.offset().top + $deom.height()) > $(window).height()) {
                        $("body,html").animate({ scrollTop: $deom.offset().top }, 700);
                }
            }

4、除此之外，jQuery中還有innerWidth()/innerHeight()、outerWidth()/outerHeight()的方法，具體可以參照jQuery手冊了解。

二、原生JS中的相關問題。

1 、window 對象

Window 尺寸（三種方法）

• window.innerHeight /innerWidth- 瀏覽器窗口的內部高度/寬度
• 當然IE總是例外：document.documentElement.clientHeight/clientWidth
• document.body.clientHeight/clientWidth

方法

• window.open() - 打開新窗口
• window.close() - 關閉當前窗口
• window.moveTo() - 移動當前窗口
• window.resizeTo() - 調整當前窗口的尺寸

2 、window.screen 對象包含有關用戶屏幕的信息

• screen.availWidth /screen.availHeight - 可用的屏幕高度/寬度，以像素計，減去界面特性，比如窗口任務欄。