浏览器

  • 整个屏幕的尺寸：window.screen.width/height；
  • 浏览器的尺寸：window.outerWidth/outerHeight；
  • 浏览器内部尺寸(包括滚定条)：window.innerWidth/innerHeight；
  • 视口尺寸(不包括滚动条)：document.documentElement.clientWidth/clientHeight；

BOM

单个元素

client系列

  • clientWidth：元素自身的宽度+左右填充；width + padding-left + padding-right
  • clientHeight：元素自身的高度+上下填充；height + padding-top + padding-bottom
  • clientLeft：元素对象的左边框；border-left
  • clientTop：元素对象的上边框；border-top

offset系列

  • offsetWidth：clientWidth+左右边框；clientWidth + border-left + border-right+滚动条(如果有)
  • offsetHeight：clientHeight+上下边框；clientHeight + border-top + border-bottom+滚动条(如果有)

offsetWidth

  • offsetParent：取已经定位的父集元素，没有已经定位的父集元素，就是获取body；

  • offsetLeft/offsetTop：在不同的浏览器中其值不同，且与父元素的position属性（relative,absolute,fixed）有关。现分以下几种情况说明：

    1. 在父元素均不设置position属性时，在Chrome，opera和IE浏览器中offsetLeft是元素边框外侧到浏览器窗口内侧的距离：

    offsetLeft

    1. 当父元素设置position元素时又分为两种情况：

      1. 如果父元素是body且body设置了position属性，在Chrome和opera浏览器中offsetLeft是元素边框外侧到body边框外侧的距离

      offsetLeft

      1. 如果父元素不是body元素且设置了position属性时，offsetLeft为元素边框外侧到父元素边框内侧的距离（各浏览器情况一致）。

      offsetLeft

scroll系列

  • 内容没有溢出 相当于clientWidth / clientHeight
  • 内容溢出： (得到的值是一个约等于的值，而且不同浏览器有一定的差异，因为对字体，行高等渲染的机制不一样)
    • scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。
    • scrollHeight：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。
  • scrollLeft / scrollTop：滚动条卷去 相当于页面被卷去的

元素位置

Element.getBoundingClientRect()返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

Tips：

  1. js获取body=>document.body；
  2. js获取html=>document.documentElement；
  3. 有h5的声明body不兼容;没有h5的声明html不兼容；
  4. 声明了文档类型就用html 没有声明文档类型就用body；
1
2
3
// 兼容处理
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;

判断滚动条滚到页面底部

需要了解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。

  1. clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。

  2. offsetHeight：是指元素内容的高度。依照上面的，那这个高度呢就是DIV内部的高度，包括可见部分及以滚动条下面的不可见部分。

  3. scrollTop：这个是什么呢？他可以理解为滚动条可以滚动的长度。

举例，如果一个DIV高度是400px（即clientHeight为400），而里面的内容是一个很长的列表，内容的高度是1000px（即offsetHeight为1000）。那么，可见部分我们看到400px，1000px的内容中还有600px不可见。而这不可见的部分呢，正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动，此时scrollTop为0，如果你把滚动条拉到底，显示出列表最下面的部分，此时，scrollTop为600。　所以scrollTop的取值区间为[0, 600]。　所以这个600可以理解为滚动条可以滚动的长度。

理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。

首先，我们拉动滚动条，从最上面拉到最下面，变化的是scrollTop的值，而这个值是有一个区间的。
这个区间是： [0, (offsetHeight - clientHeight)]

即，滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。

  • 判断滚动条滚动到最底端： scrollTop == (offsetHeight – clientHeight)
  • 在滚动条距离底端50px以内： (offsetHeight – clientHeight) – scrollTop <= 50
  • 在滚动条距离底端5%以内： scrollTop / (offsetHeight – clientHeight) >= 0.95

文章阅读进度

1
2
3
4
5
6
7
8
const box = document.documentElement;
window.onscroll = () => {
    const clientHeight = box.clientHeight;
    const offsetHeight = box.offsetHeight;
    const scrollTop = box.scrollTop;
    const percent = `${Math.round(scrollTop / (offsetHeight - clientHeight) * 100)}%`;
    console.log(percent);
}

获取首屏的宽度/高度

1
2
3
4
5
6
7
8
9
// 声明了文档类型就用html 没有声明文档类型就用body

// 获取首屏或者是可视区域的宽度或高度
// var winW = document.body.clientWidth;
// var winH = document.body.clientHeight;


var winW = document.documentElement.clientWidth;
var winH = document.documentElement.clientHeight;

回到顶部

1
2
3
4
document.documentElement.scrollTop=0;
document.documentElement.scroll(0,0);
window.scroll(0,0);
//scroll(x,y)与scrollTo(x,y)是一样一样的;

参考文献

offsetWidth与offsetLeft

JS实现判断滚动条滚到页面底部并执行事件的方法

JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解