- 综合排序
- 最热优先
- 最新优先
- 来自专栏全栈程序员必看
SCrollTOP scrollHeight
jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。 我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。 滚动条向下拖动一段距离，看到的页面效果如下（右部的a、b是我抓图后，用PS标出来的）： 那么，这里的外部div 的scrollTop、scrollHeight 属性到底是什么呢？ 有人说，scrollTop等于图中标出的a。scrollHeight 等于外部div的高度500px。其实，都不对。 而scrollTop表示滚动条（一个点）当前的位置在750px里占了多少，不是图中标出的a。
2.9K20编辑于 2022-09-15 - 来自专栏Java架构师必看
scrollTop()方法
今天说一说scrollTop()方法,希望能够帮助大家进步!!! scrollTop设置滚动条用法 前提 工作中需要做一个点击右侧网元或板卡，左侧topo图滚动到对应位置 用到的知识点 scrollTop(),position()，工作环境中用了Jtopo,Ztree scrollTop定义与用法 scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 $(selector).scrollTop(offset) //offset可选 position定义与用法 position() 方法返回匹配元素相对于父元素的位置（偏移）。 if(offsetTop >= 0){ if(offsetTop - (bheight/2) >= 0){ $("#right_Tree").scrollTop
1.5K10编辑于 2022-09-26 - 来自专栏超然的博客
document.body.scrollTop与document.documentElement.scrollTop兼容
项目中遇到这个小问题，看到有前辈总结，借来用一下 document.body.scrollTop与document.documentElement.scrollTop兼容 这两天在写一个JS的网页右键菜单 由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值，那到底网页的scrollTop值怎么得到呢？ 因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。 比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。 所以，如果要得到网页的真正的scrollTop值，可以这样： varsTop=document.body.scrollTop+document.documentElement.scrollTop;
1.5K20发布于 2018-08-03 - 来自专栏云计算linux
chrome不认documentElement.scrollTop
在页面显示浮动层时，IE、Firefox下都能显示正常，但Chrome下出现了浮动层永远显示在上面，经过仔细分析，发现Chrome对document.documentElement.scrollTop的识别会出现误差 不过加上document.body.scrollTop后，则显示正常。 由于document.documentElement.scrollTop和document.body.scrollTop在标准模式或者是奇怪模式下都只有一个会返回有效的值，所以都加上也不会有问题（看来上面的问题是 ("poster").style.top = document.documentElement.scrollTop + "px"; else if (document.body) ("poster").style.top = document.documentElement.scrollTop +document.body.scrollTop+ "px";
19910编辑于 2024-12-17 - 来自专栏全栈程序员必看
scrollHeight、scrollTop等的比较
自接触js以来一直使用的是jquery插件，对js的了解甚少，经常容易混淆element.scrollHeight、element.scrollTop等方法。今天对这些方法做出比较。 scrollTop：可以设置或者获取元素的已滚动的上部不可见区域的高度。 <! pL = p.length; for(var i=1; i<=pL; i++){ p[i-1].className = "p" + i; } element.scrollTop = 300; console.log("element's scrollTop = " + element.scrollTop); 第七行代码设置了scrollTop，第八行输出了scrollTop ，输出值为： element’s scrollTop = 300。
3K30编辑于 2022-09-15 - 来自专栏IMWeb前端团队
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别 scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。 ? 最后附上这些属性的详细解释的文档： clientHeight offsetHeight offsetTop scrollHeight scrollTop
2K30发布于 2019-12-04 - 来自专栏全栈程序员必看
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight…
所以当滚动条在最顶端的时候，scrollTop=0，当滚动条在最低端的时候，scrollTop=115 这个115怎么来的(滚动条高度是15，我量的)，见下图。(实为我主观臆测，不保证准确性。。。 _(:з」∠)_ scrollTop是一个整数。 如果一个元素不能被滚动，它的scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0。 如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。 判定元素是否滚动到底： element.scrollHeight – element.scrollTop === element.clientHeight 返回顶部 element.scrollTop = 0; let dy = ele.scrollTop / 4; // 每次更新scrollTop改变的大小 if (ele.scrollTop > 0) { ele.scrollTop -= Math.max
3.1K20编辑于 2022-09-15 - 来自专栏菩提树下的杨过
scrollTop与offsetTop研究
虽然我是做后台出身的，但最近心血来潮越来越关注前台技术了^_^，前二天看了“司徒正美”先生的图片无缝滚动分析后，对于scrollTop和offsetTop这二个以前一直没搞太明白的属性研究了一番，大致弄明白了 doctype html> <title>scrollTop study</title> <style type="text/css"> .outer{}{ position:relative; document.getElementById("item2"); var result = document.getElementById("result"); outer.scrollTop ++ ; result.innerHTML = "container.scrollTop=" + outer.scrollTop + ",item2.offsetTop 然后里面放了二个100*60的子div,显然60*2=120px，大于最外层容器的100px高度，所以会有一部分被截掉，为了更形象，二个子div上面还放置了一行文字,高度为18px,点击按钮后，最下面绿色子div的scrollTop
1.4K50发布于 2018-01-23 - 来自专栏全栈程序员必看
JQuery Div scrollTop ScrollHeight
jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。 我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。 滚动条向下拖动一段距离，看到的页面效果如下（右部的a、b是我抓图后，用PS标出来的）： 那么，这里的外部div 的scrollTop、scrollHeight 属性到底是什么呢？ 有人说，scrollTop等于图中标出的a。scrollHeight 等于外部div的高度500px。其实，都不对。 而scrollTop表示滚动条（一个点）当前的位置在750px里占了多少，不是图中标出的a。 这时，我们很叹服Windows的设计者，滚动条设计的如此形象美妙，欺骗了多少头脑简单的鼠标操作员。
3.9K10编辑于 2022-09-15 - 来自专栏全栈程序员必看
scrollTop和scrollHeight「建议收藏」
scollTop scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个”non-scrollable”属性）， scrollTop将被设置为 设置scrollTop的值小于0，scrollTop 被设为0 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值. 总结：元素发生溢出时可以设置scrollTop，设置的值为元素里内容向上滚动的不可见区域的高度 scollHeight 判定元素是否滚动到底 如果元素滚动到底，下面等式返回true，没有则返回false . element.scrollHeight - element.scrollTop === element.clientHeight 总结：当元素无溢出时为元素本身的高度，当元素发生溢出时为元素内容里面的总高度 document.getElementById('scrollBody').scrollTop = 200; console.log(document.getElementById(
1.1K20编辑于 2022-09-15 - 来自专栏IMWeb前端团队
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别 scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。 ? 最后附上这些属性的详细解释的文档： clientHeight offsetHeight offsetTop scrollHeight scrollTop
9.1K50发布于 2018-01-08 - 来自专栏生如夏花绚烂
关于scrollTop()scrollLeft()兼容问题
在chrome中获取滚动条的垂直偏移 console.log($(document.documentElement).scrollTop()) 但是上面代码在IE中不生效 在IE中是这样获取的 console.log ($(document.body).scrollTop()) 要解决两个兼容问题很简单，直接将两个向加即可，因为两个方法只有一个生效 console.log($(document.documentElement ).scrollTop()+$(document.body).scrollTop()) 设置偏移也是如此 $(html,body).scrollTop(300)
88220编辑于 2022-09-08 - 来自专栏全栈程序员必看
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight 网页被卷去的高：document.body.scrollTop 屏幕分辨率高：window.screen.height 每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5 scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。
1.3K30编辑于 2022-09-15 - 来自专栏全栈程序员必看
scrollTop和scrollHeight属性「建议收藏」
outerctn.scrollHeight; var $outerctn_h=$outerctn.height(); var innerctn_h=innerctn.height(); var scrollTop =innerctn_h-$outerctn_h; $outerctn.on('scroll',function(){ console.log($(this).scrollTop(),scrollTop ) if($(this).scrollTop()>=scrollTop){ console.log('滚动条到达底部了') } }) </script> 发布者：全栈程序员栈长
1K20编辑于 2022-09-15 - 来自专栏前端知识分享
第49天：封装自己的scrollTop
一、scroll家族 offset 自己的偏移 scroll滚动的 scrollTop和scrollLeft scrollTop 被卷去的头部 当滑动滚轮浏览网页的时候，网页隐藏在屏幕上方的距离 二、页面滚动效果事件 window.onscroll=function(){页面滚动语句} 三、获取scrollTop 谷歌和没有声明DTD<DOCTYPE>：document.body.scrollTop 火狐和其他浏览器 ：document.documentElement.scrollTop IE9+和最新浏览器:window.pageXOffset; pageYOffset(scrollTop) 兼容性写法： var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0; 四、json对象表示 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>封装自己的scrollTop
82710发布于 2018-09-11 - 来自专栏编程社区
获取页面滚动距离pageYOffset、scrollY、scrollTop
window.scrollY 页面如果未定义DOCTYPE文档头，所有浏览器都支持docume.body.scrollTop属性获取滚动高度。 document.body.scrollTop 如果页面定义了DOCTYPE文档头，那么HTML元素上的scrollT属性在IE、Firefox、Opera（presto内核）下都可以获取滚动高度值，而在 document.documentElement.scrollTop; //Chrome,Safari下为0 此在获取页面滚动高度的时候优先考虑使用 window.pageYOffset 然后在使用scrollTop var _scrollLeft = window.scrollX || window.pageXOffset || document.documentElement.scrollLeft var _scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop
4.4K41编辑于 2022-02-13 - 来自专栏全栈程序员必看
JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解
总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的，因此在本博文中详细的介绍并给出实例。 3. scrollLeft 和scrollTop 3.1 概念 element.scrollLeft ：返回元素左边缘与视图之间的距离，这里的视图指的是元素的内容（包括子元素以及内容）。 element.scrollTop ：返回元素上边缘与视图之间的距离。 我们在页面中经常会用到如图所示的带滚动条的框,我们的QQ消息，微信消息也是这样的呀！ 当我将水平，垂直滚动条都拉到底部时，scrollLeft 和 scrollTop 都 分别为116.8 和156.8 ，我设置的元素宽高分别为：200 180 ，视图（子元素）宽高分别为：300 320 > parent_div.onscroll = function(){ console.log(parent_div.scrollLeft) console.log(parent_div.scrollTop
4.7K40编辑于 2022-09-15 - 来自专栏全栈程序员必看
滚动条三要素scrollTop clientHeight scrollHeight
的方法不同，具体看下面那个代码块 $("body").on("mousewheel",function(event){ console.log(document.documentElement.scrollTop ); if(document.documentElement.scrollTop < 0){ document.documentElement.scrollTop = 0; }else{ if(event.originalEvent.deltaY > 0){ document.documentElement.scrollTop = document.documentElement.scrollTop + 100; }else if(event.originalEvent.deltaY < 0){ document.documentElement.scrollTop = document.documentElement.scrollTop - 100; } } }) </script> </html> //变量scrollTop是滚动条滚动时，距离顶部的距离 var scrollTop = document.documentElement.scrollTop
1.5K40编辑于 2022-09-15 - 来自专栏雨临Lewis的博客
$(body).animate({scrollTop:top})无效的问题
问题 我在个人站点的左下角和右下角各自使用了如下代码来将页面滚动到顶部和底部： 1 2 3 $("body").animate({scrollTop:0},800); $("body").animate ({scrollTop:$(document).height()},800); 最近才忽然发现在Chrome浏览器下，上面的代码没有问题，而在Firefox下却是无效的。 对于Chrome而言，支持的是这种写法： 1 $("body"）.animate({"scrollTop":top}); 而对于Firefox，则是支持如下写法： 1 $("html").animate ({"scrollTop":top}); 之前就一直耳闻前端开发需要兼容不同浏览器，非常地麻烦，今天算是见识到了冰山一角。 ： 1 2 3 $("html,body").animate({scrollTop:0},800); $("html,body").animate({scrollTop:$(document).height
89710编辑于 2022-01-11 - 来自专栏全栈程序员必看
clientHeight、scrollHeight、offsetHeight和scrollTop之间区别
）：document.body.scrollHeight 内容高+padding+边框：document.body.offsetHeight 滚动条已经滚动的高度：document.body.scrollTop
3.4K20编辑于 2022-09-15
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号