scrollTop和scrollHeight

scollTop

scrollTop 可以被设置为任何整数值，同时注意：

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

总结：元素发生溢出时可以设置scrollTop，设置的值为元素里内容向上滚动的不可见区域的高度

scollHeight

判定元素是否滚动到底

如果元素滚动到底，下面等式返回true，没有则返回false.

element.scrollHeight - element.scrollTop === element.clientHeight

总结：当元素无溢出时为元素本身的高度，当元素发生溢出时为元素内容里面的总高度

例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>scroll</title><style type="text/css">#box{width: 200px;height: 200px;border: 1px solid green;position: absolute;top: 350px;left: 0;}</style>
</head><body><div id="scrollBody" style="position:absolute;top:0;bottom:0;left:0;right:0;overflow:scroll;height:300px;border: 1px solid red;"><div style="font-size:20px;height:100px;border: 1px solid orange;">1</div><div style="font-size:20px;height:100px;border: 1px solid orange;">2</div><div style="font-size:20px;height:100px;border: 1px solid orange;">3</div><div style="font-size:20px;height:100px;border: 1px solid orange;">4</div><div style="font-size:20px;height:100px;border: 1px solid orange;">5</div></div><div id="box"></div><div style="position:relative;top:350px;"><button onClick="scrollToTop()">按钮1</button><button onClick="read()">按钮2</button></div><script>console.log(document.getElementById('scrollBody').scrollHeight); //510function scrollToTop(){//   这里边可以写一些逻辑，比如偶数行一个一个的置顶，不如状态等于0的一个一个的置顶！document.getElementById('scrollBody').scrollTop = 200;console.log(document.getElementById('scrollBody').scrollTop)  // 200}function read(){console.log(document.getElementById('box').scrollHeight); // 200}</script>
</body></html>

scrollTop和scrollHeight相关推荐

top、postop、scrolltop、scrollHeight、offsetHeight
网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域高:document.body.o ...
Js——ScrollTop、ScrollHeight、ClientHeight、OffsetHeight汇总
一直对ScrollTop.ScrollHeight.ClientHeight.OffsetHeight这些内容傻傻分不清楚,今天整体下. scrollHeight scrollHeight含有scro ...
html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云阅读:223 作者 ...
滚动条三要素scrollTop clientHeight scrollHeight
插件 https://github.com/inuyaksa/jquery.nicescroll <!DOCTYPE html> <html><head><m ...
html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight
读值 1) window.pageYOffset==window.scrollY it returns the number of pixels the document is currently s ...
scrollTop和scrollHeight属性
--------------------------------------------------------------------- 检测滚动条是否滚动到底部: <body>< ...
关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script>window.addEventListener('DOMContentLoaded',function(){var no ...

scrollTop和scrollHeight

scrollTop和scrollHeight相关推荐

最新文章

热门文章