关于浏览器、屏幕、滚动条的位置与尺寸问题

标签：

今天的工作中遇到了相关问题，恶补了一下，觉得以后需要回顾，整理了一下。

一、好用的方法

先说说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 - 可用的屏幕高度/宽度，以像素计，减去界面特性，比如窗口任务栏。

关于浏览器、屏幕、滚动条的位置与尺寸问题

标签：

原文地址：http://www.cnblogs.com/clearsky/p/5796760.html