jQuery里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。 我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。 一、滚动条有关属性的正确理解: 假设有以下Html...
scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。 一个元素的 scrollTop 值是这个元素的内容顶部(卷起来的)到它的视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。 在使用显示比例缩放的系统上,scrollTop 可能会提供一个小数。 浏览器支持...
而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。 scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位...
公式: el.offsetTop - document.documentElement.scrollTop <= viewPortHeight function isInViewPortOfOne (el) { // viewPortHeight 兼容所有浏览器写法 const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight const offsetTop = el.offsetTop c...
九.scrollHeight属性: 此属性获取对象的实际尺寸。 document.body.scrollTop与document.documentElement.scrollTop兼容 1.各浏览器下 scrollTop的差异: IE6/7/8: 可以使用 document.documentElement.scrollTop; IE9及以上: 可以使用window.pageYOffset或者document.documentElement.sc...
element.scrollTop=== element.scrollHeight 看图理解: clientTop, 只读 一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距。clientTop是只读的。 clientHeight, 只读 这个属性是只读属性,对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条、...
scrollWidth 也是类似道理。 IE 和 FireFox 全面支持,而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。 1.clientHeight, clientWidth: 这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入 ...
offsetTop:获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置 event.clientX相对文档的水平坐标 event.clientY相对文档的垂直坐标 event.offsetX相对容器的水平坐标 event.offsetY相对容器的垂直坐标 document.documentElement.scrollTop垂直方向滚动的值 ...
scrollTop() 方法设置或返回被选元素的垂直滚动条位置。提示:当滚动条位于最顶部时,位置是 0。当用于返回位置时:该方法返回第一个匹配元素的滚动条的垂直位置。当用于设置位置时:该方法设置所有匹配元素的滚动条的垂直位置。语法返回垂直滚动条位置:$(selector).scrollTop()...
简述:scrollTop是JavaScript中一个非常有用且重要的方法,它用于获取或设置元素的垂直滚动条位置,实现各种滚动相关的功能,无论是回到顶部、滚动到指定位置还是监听滚动事件,都需要用到scrollTop,在本文中,我们将深入了解scrollTop的用法和实际应用,这是一张scrollTop的关系图,可供参考。