精华内容
下载资源
问答
  • scrollTop

    2020-12-18 17:56:35
    scrollTop属性是什么? 有些情况下,“元素中内容”的高度会超过“元素本身”的高度,scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。 通过一个实例演示来讲述scrollTop属性是什么 下面的演示中...

    scrollTop属性是什么?

    有些情况下,“元素中内容”的高度会超过“元素本身”的高度, scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。

    通过一个实例演示来讲述scrollTop属性是什么

    下面的演示中,外层元素的高度值是200px,内层元素的高度值是300px。很明显,“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时,有部分内容会隐没在“外层元素的上边界”之外,scrollTop就等于这部分“不可见的内容”的高度。

    演示:(拖动滚动条,可以看到scrollTop值的变化)

    这些文字显示在内层元素中。

    scrollTop值是:

    <script type="text/javascript"> </script>

     

    上面演示中可滚动元素的原码:

    
     
    1. <div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素">

    2. <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素">

    3. 这些文字显示在内层元素中。

    4. </div>

    5. </div>

     

    解释:

    • 内层元素的高度值300px > 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示,而外层元素把overflow设置为auto,因此外层元素的右侧会出现竖直滑动条
    • 初始状态下,“内层元素的上边界”和“外层元素的上边界”重合,没有任何内容超过“外层元素的上边界”,此时scrollTop属性的值为0。
    • 当向下拖动滚动块时,超过“外层元素的上边界”的内容会逐渐增多,scrollTop值就等于这些超出部分的高度。
    • 当拖动滚动块到最底部时,“内层元素的下边界”和“外层元素的下边界”重合,此时,超过“外层元素的上边界”的内容的高度=300px-200px=100px,也就是此时的scrollTop值。

     

    通过js代码来读取,写入scrollTop的值

    注意:scrollTop的使用方式是element.scrollTop,而不是element.style.scrollTop

    通过js代码来读取scrollTop的值

    上面的演示实例中,其实已经用到了scrollTop的读取操作。具体来说就是,在拖动滚动条的过程中,会读取此时的scrollTop的值,并在下方文字中显示出来。

    上面的演示实例的完整原码:

    
     
    1. <div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素">

    2. <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素">

    3. 这些文字显示在内层元素中。

    4. </div>

    5. </div>

    6.  
    7. <p>scrollTop值是:<span id="显示外层元素的scrollTop值"></span></p>

    8.  
    9. <script type="text/javascript">

    10. var div_外层元素 = document.getElementById("外层元素");

    11. div_外层元素.onscroll=读取外层元素的scrollTop值并显示出来;

    12. //注册onscroll事件处理函数。当拖动滚动条时,会产生onscroll事件

    13.  
    14. var span_显示外层元素的scrollTop值 = document.getElementById("显示外层元素的scrollTop值");

    15.  
    16. //onscroll事件的处理函数

    17. function 读取外层元素的scrollTop值并显示出来()

    18. {span_显示外层元素的scrollTop值.innerHTML=div_外层元素.scrollTop;

    19. //读取“外层元素”此时的scrollTop的值并显示出来

    20. }

    21.  
    22. 读取外层元素的scrollTop值并显示出来();

    23. //页面加载完成后,执行一次此函数。显示最初的scrollTop值,此时的值为0

    24. </script>

     

    解释:

    • 当拖动“外层元素的滚动条”时,会产生onscroll事件。为这个事件注册一个名为读取scrollTop的值并显示出来的处理函数
    • 在读取scrollTop的值并显示出来这个事件处理函数中,通过外层元素_div.scrollTop得到“外层元素”当时的scrollTop的值,并显示在页面上。

     

    通过js代码来设置scrollTop的值

    对上面的演示例子作一些修改。添加功能:通过js语句来设置scrollTop的值

    示例:

    这些文字显示在内层元素中。

    scrollTop值是:

    把scrollTop设为50把scrollTop设为500

    输入scrollTop的值:确定

    <script type="text/javascript"> </script>

     

    上面的演示实例的完整原码:

    
     
    1. <div style="width:200px;height:200px;background-color:#999999;overflow:auto;" id="外层元素A">

    2. <div style="width:100px;height:300px;background-color:#FFFF00;" id="内层元素A">

    3. 这些文字显示在内层元素中。

    4. </div>

    5. </div>

    6.  
    7. <p>scrollTop值是:<span id="显示外层元素A的scrollTop值"></span></p>

    8.  
    9. <p><button type="button" onclick="div_外层元素A.scrollTop=50;">把scrollTop设为50</button>

    10. <button type="button" onclick="div_外层元素A.scrollTop=500;">把scrollTop设为500</button>

    11. </p>

    12.  
    13. <p>输入scrollTop的值:<input type="text" id="输入scrollTop的值" value="" />

    14. <button type="button" onclick="设置scrollTop的值()" name="设置scrollTop的值">确定</button>

    15. </p>

    16.  
    17. <script type="text/javascript">

    18. var div_外层元素A = document.getElementById("外层元素A");

    19. div_外层元素A.onscroll=读取外层元素A的scrollTop值并显示出来;

    20. //注册onscroll事件处理函数。当拖动滚动条时,会产生onscroll事件

    21.  
    22. var span_显示外层元素A的scrollTop值 = document.getElementById("显示外层元素A的scrollTop值");

    23.  
    24. //onscroll事件的处理函数

    25. function 读取外层元素A的scrollTop值并显示出来()

    26. {span_显示外层元素A的scrollTop值.innerHTML=div_外层元素A.scrollTop;

    27. //读取“外层元素”此时的scrollTop的值并显示出来

    28. }

    29.  
    30. 读取外层元素A的scrollTop值并显示出来();

    31. //页面加载完成后,执行一次此函数。显示最初的scrollTop值,此时的值为0

    32.  
    33. div_外层元素A.scrollTop = 10;

    34. //通过js语句来设置scrollTop的值,本条语句会触发onscroll事件,使得"读取外层元素A的scrollTop值并显示出来"函数执行一次。

    35.  
    36. function 设置scrollTop的值()

    37. {if("" != document.getElementById("输入scrollTop的值").value)

    38. div_外层元素A.scrollTop = document.getElementById("输入scrollTop的值").value;

    39. else alert("请输入一个数值");

    40. }

    41. </script>

     

    解释:

    • 形如div_外层元素A.scrollTop = 12345;的赋值语句会触发onscroll事件,使得读取scrollTop的值并显示出来函数执行一次
    • 上一个例子中已经提到:当拖动滚动条到最底部时,scrollTop=300px-200px=100px,这是scrollTop能够取的最大值。当用更大的值赋给scrollTop时,scrollTop会自动把它转变为100。例如上面的“把scrollTop设为500”按钮,scrollTop会把500转变为100。

     

    得到body元素的scrollTop

    body元素的scrollTop指的是超出“浏览器窗口上边界”的内容的高度

    当html文档头部包含有“文档类型声明”时,需要用document.documentElement.scrollTop获得正确的值,而document.body.scrollTop的值为0

     

    
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    2. <script type="text/javascript">

    3. alert("document.documentElement.scrollTop:"+document.documentElement.scrollTop //正确的值

    4. +"document.body.scrollTop:"+document.body.scrollTop //值为0

    5. );

    6. </script>

     

    当html文档头部不包含任何“文档类型声明”时,需要用document.body.scrollTop获得正确的值,而document.documentElement.scrollTop的值为0

    下面定义的get_scrollTop_of_body()函数可以处理这种差异,得到body元素的scrollTop值

    
     
    1. function get_scrollTop_of_body(){

    2. var scrollTop;

    3. if(typeof window.pageYOffset != 'undefined'){

    4. scrollTop = window.pageYOffset;

    5. }

    6. else

    7. if(typeof document.compatMode != 'undefined' &&

    8. document.compatMode != 'BackCompat'){

    9. scrollTop = document.documentElement.scrollTop;

    10. }

    11. else

    12. if(typeof document.body != 'undefined'){

    13. scrollTop = document.body.scrollTop;

    14. }

    15. return scrollTop;

    16. }
    展开全文
  • scrolltop

    2013-02-19 16:14:05
    今天做图片lazy load 需要得到页面的scrolltop值 当然如果有jquery 那么就直接 $(ele).scrollTop(); 好了, 本文结束。。 不过 事实是没有这么舒服, 没有jquery.. 好吧, 你不要告诉我去官网下一个。...

    今天做图片lazy load 需要得到页面的scrolltop值

    当然如果有jquery 那么就直接
    $(ele).scrollTop();

    好了, 本文结束。。

    不过 事实是没有这么舒服, 没有jquery..

    好吧, 你不要告诉我去官网下一个。。

    故事一般都是曲折的, 所以jquery 是不能 也不会有的。。

    言归正传 这个值大家觉得烦 是因为有很多类似的

    window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事, 注IE9 开始支持此属性。

    window.scrollY 被Firefox, Google Chrome , Safari支持 不关doctype的事, 注IE9 不支持此属性

    在(quirk 模式)的时候 document.body.scrollTop 在 Internet Explorer, Firefox, Opera, Google Chrome Safari 返回正确的值。
    在(quirk 模式)的时候 document.documentElement.scrollTop 永远是零

    非quirk模式的时候 document.documentElement.scrollTop Internet Explorer, Firefox and Opera 返回正确的值 但是在 Google Chrome ,Safari 中永远是零

    特整理一个表格如下

    非quirk模式 IE6 7 8 IE9 firefox opera chrome safari
    scrollY undefined undefined 正确 正确 正确 正确
    pageYOffset undefined 正确 正确 正确 正确 正确
    body.scrollTop 0 0 0 0 正确 正确
    documentElement.scrollTop 正确 正确 正确 正确 0 0
                 
    quirk 模式 IE6 7 8 IE9 firefox opera chrome safari
    scrollY undefined undefined 正确 正确 正确 正确
    pageYOffset undefined 正确 正确 正确 正确 正确
    body.scrollTop 正确 正确 正确 正确 正确 正确
    documentElement.scrollTop 0 正确 0 0 0 0

    以上在win7环境下测试

    可以看出是非常凌乱的

    只在quirk模式下, body.scrollTop是被所有都支持的

    所以这个表大家也不用 也没有必要去记, 只要记住一条

    if(window.pageYOffset){//这一条滤去了大部分, 只留了IE678

    }else if(document.documentElement.scrollTop ){//IE678 的非quirk模式

    }else if(document.body.scrolltop){//IE678 的quirk模式

    }

    原则是看pageYOffset 然后看documentElement.scrollTop, 最后是document.body.scrollTop

    当然 也可以直接scrollTop 而不使用pageYOffset

    以下是MDN 提供的兼容性代码

    scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == ‘number’ ? t : document.body).scrollTop

     

    原文:http://www.qiongbupa.com/archives/887 

    展开全文
  • 转载自:https://www.imooc.com/article/17571网页可见区域高:document.body.clientHeight网页正文全文高:document.body.scrollHeight网页可见区域高(包括...document.body.scrollTop屏幕分辨率高:window.screen...

    网页可见区域高:document.body.clientHeight

    网页正文全文高:document.body.scrollHeight
    网页可见区域高(包括边线的高):document.body.offsetHeight
    网页被卷去的高:document.body.scrollTop

    屏幕分辨率高:window.screen.height

     

    每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下:
    clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度,其中:
    clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。

    offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。

    接下来讨论出现有滚动条时的情况:
    当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时:
    scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。

    scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。
    offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。

    offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。

    展开全文
  • scrollTop属性

    2020-08-11 19:04:03
    scrollTop:可读可写 scrollTop是一个整数:元素不能被滚动OR设置scrollTop值小于0,则scrollTop值为0 设置超出这个容器的可滚动值 ,则scrollTop值为容器最大值 判断元素是否滚动到底:e.scrollHeight - e....
    • scrollTop:可读可写

    scrollTop是一个整数:元素不能被滚动OR设置scrollTop值小于0 ,则scrollTop值为0

                                        设置超出这个容器的可滚动值 ,则scrollTop值为容器最大值

    判断元素是否滚动到底:e.scrollHeight - e.scrollTop === e.clientHeight

    返回顶部:element.scrollTop = 0

    展开全文
  • scrollTop 用法说明

    2020-12-03 22:09:45
    当向下拖动滚动条时,有部分内容会隐没在“外层元素的上边界”之外,scrollTop就等于这部分“不可见的内容”的高度。 演示:(拖动滚动条,可以看到scrollTop值的变化) 这些文字显示在内层元素中。 scrollTop值是:...
  • javascript中scrollTop详解

    2021-01-19 19:36:40
    scrollTop 表示滚动的高度,默认从position:0;开始向下滚,scrollTop(offset)的offset表示相对顶部的偏移,以像素计, scrollTop()滚动的高度既能‘设置’滚动值,也能‘获取’滚动值。 当设置滚动值时,该...
  • scrollTop踩坑

    2020-09-03 23:01:39
    scrollTop踩坑 业务场景 通过webUSB 连接开发板,开启Serial串口进行通讯。 因为开发板在串口开启后会一只像web端传输数据,我们拿到这个数据之后,要返回到用户界面,类似于实现terminal之类的页面返回给用户。 ...
  • simple-scrollTop-源码

    2021-05-18 18:54:38
    嘿,您需要像jquery的scrollTop()一样工作的简单scrollTop方法吗? 这就是你所需要的。 交叉浏览获取并设置scrollTop() 用法 import scrolltop from 'simple-scrolltop' ; // get var ...
  • scrollTop 笔记

    2018-05-14 14:26:38
    Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。 一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么...
  • 获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop 获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft 1.各浏览器下 ...
  • scrollTop如何获取

    2020-10-14 10:39:08
    1、各浏览器下 scrollTop的差异 IE6/7/8: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ; 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop; ...
  • scrollTop应用

    2018-10-18 23:25:00
    $(window).scroll(function() { var s =$(window).scrollTop(); console.log(s); var h = document.documentElement.scrollHeight || document.body.scrollHeight; console.log(h); var scroll_...
  • document.body.scrollTop和document.documentElement.scrollTop都可以 2、各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,075
精华内容 4,430
关键字:

scrolltop