首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

如何判断元素是否进入可视区域viewport?2

如何判断元素是否进入可视区域viewport?2

2. 客户区大小

客户区大小是只读的,每次访问都要重新计算的。
客户区大小     概念     公式
clientWidth     clientWidth 属性是元素内容区宽度加 上左右内边距宽度;     clientWidth = content + padding
clientHeight     元素内容区高度加上上下内边距高度     clientHeight = content + padding

最常用到这些属性的情况,就是确定浏览器视口大小的时候(在 IE7 之前的版本中)。如下面的例子所示:

    function getViewport(){
        // 检查 document.compatMode 属性,以确定浏览器是否运行在混杂模式。
        // Safari3.1 之前的版本不支持这个属性,因此就会自动执行 else 语句
        if (document.compatMode == "BackCompat"){
            return {
                width: document.body.clientWidth,
                height: document.body.clientHeight
            };
        } else {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            };
        }
    }
    复制代码

小结

客户区大小: 只读属性;不包括滚动条和边框,不包括外边距。
3. 滚动大小
    概念
scrollHeight     在没有滚动条的情况下,元素内容的总高度。
scrollWidth     在没有滚动条的情况下,元素内容的总宽度。
scrollLeft     被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop     被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小。

scrollLeft 和 scrollTop属性既可以确定元素当前滚动的状态,也可以设置元素的滚动位 置。在元素尚未被滚动时,这两个属性的值都等于 0。如果元素被垂直滚动了,那么 scrollTop 的值 会大于 0,且表示元素上方不可见内容的像素高度。如果元素被水平滚动了,那么 scrollLeft 的值会 大于 0,且表示元素左侧不可见内容的像素宽度。这两个属性都是可以设置的,因此将元素的 scrollLeft 和 scrollTop 设置为 0,就可以重置元素的滚动位置。比如:上篇文章文字跑马灯项目中scrollLeft的使用(戳此跳转)

小结

只读属性,不包括滚动条、border。
返回列表