scrollTop详测

1. 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
2. 设置scrollTop的值小于0，scrollTop 被设为0
3. 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>scrollHeight详测</title><style>#box{width:500px;height: 200px;overflow: auto;border: 1px solid #ccc;}#box .inner {height: 300px;background-color: pink;}</style>
</head>
<body><!-- 框200px，内容区 300px --><div id="box"><div class="inner">300px</div></div><script>/*1. 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。2. 设置scrollTop的值小于0，scrollTop 被设为03. 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。*/var  el = document.getElementById("aa");var box = document.getElementById("box");// 1. // 如果没有滚动条，scrollHeight就是框的高度，（不包括border边框的高度）  这里是200// 如果出现滚动条，就是内容总高度，这里就是 50*6 = 300console.log(box.scrollHeight); // 2.设置scrollTop的值小于0，scrollTop 被设为0box.scrollTop = -1;console.log("scrollTop设置负值后 = ",box.scrollTop); // 0// 3 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。box.scrollTop = 300;  // 容器总高是300，可滚动值当然会小于300，这里设置了最大的300console.log("scrollTop设置超出这个容器可滚动的值后 = ",box.scrollTop); // 100  // 即内容的高度 300 - box框的高度 200  = 100（最大可滚动的值）</script>
</body>
</html>

scrollTop详测相关推荐

MyBatis-Plus 快速开始及详测 SpringBoot 集成Mybatis-Plus
MyBatis-Plus 快速开始及详测简介 MyBatis-Plus (opens new window)(简称 MP)是一个 MyBatis (opens new window)的增强工具,在 ...
玛塔机器人函数_USA Today旗下专家详测！玛塔机器人到底靠什么打动了歪果仁？...
原标题:USA Today旗下专家详测!玛塔机器人到底靠什么打动了歪果仁? 编者按:本文由USA Today旗下Reviewed评测网站的资深专家Julia MacDougall撰写,是一篇对Mata ...
笔记本硬盘飚速首款1T 7200转本盘详测
笔记本硬盘飚速首款1T 7200转本盘详测 2013-05-02 05:02:00 [ 中关村在线原创 ] 作者: 郑兆远 | 责编:孙玉亮收藏文章阅读全文分享到评 ...
html5精准布局,详测3060Ti/3080，好刀法砍出精准布局
今年N家和A家都发布了新显卡,AMD那边还有新的CPU,对于整体硬件性能的提升非常大. RTX20系列用"super"取代了"Ti"编号,这次RTX3060Ti ...
JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解
1. 总述在JS 中scrollWidth.scrollHeight.scrollLeft .scrollTop 属性在做一些复杂的交互效果中是非常常用的,因此在本博文中详细的介绍并给出实例. 以上 ...
揭秘黑暗力量：AMD黑盒5400处理器详测(AMDCPU超频)
在国内,由于计算机价格的持续走低,很多玩家都不约而同地把新装主机的价格预算设定在了2500-3000元之间.在这样的"白菜价位"上,如果还想拥有一块不错的显卡的话,CPU的预算可能 ...
详测 Generics Collections TList (6): Reverse、TrimExcess
为什么80%的码农都做不了架构师?>>> unit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Clas ...
详测 Generics Collections TQueue (3): OnNotify、Extract
为什么80%的码农都做不了架构师?>>> unit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Clas ...
三十、详测 Generics Collections: TObjectList、TObjectQueue、TObjectStack
TObjectList<T>.TObjectQueue<T>.TObjectStack<T> 分别继承自: TList<T>.TQueue<T&g ...

scrollTop详测

scrollTop详测相关推荐

最新文章

热门文章