Home  >  Article  >  Web Front-end  >  js中scrollLeft, scrollTop, scrollWidth, scrollHeigh

js中scrollLeft, scrollTop, scrollWidth, scrollHeigh

WBOY
WBOYOriginal
2016-06-01 09:54:591598browse

先用文字介绍一下这四个属性。
scrollLeft 返回当前元素的左边界到它的包含元素的左边界的偏移量。
scrollTop 返回或设置匹配元素的滚动条的垂直位置。
scrollWidth 返回元素的完整的宽度,包括内边距。
scrollHeight 返回元素的完整的高度 ,包括内边距。
 

<code>

<div id="demo" style="border:1px solid red;width:150px; height:200px; margin:10px; padding:20px; overflow:auto;">
先用文字介绍一下这四个属性。
scrollLeft(scrollLeft详解) 返回当前元素的左边界到它的包含元素的左边界的偏移量。
scrollTop(scrollTop详解) 返回或设置匹配元素的滚动条的垂直位置。
scrollWidth(scrollWidth详解) 返回元素的完整的宽度,包括内边距。
scrollHeight(scrollHeight详解) 返回元素的完整的高度 ,包括内边距。
</div>

 </code>

scrollHeight=滚动条可见高度+滚动条不可见高度;
scrollWidth=滚动条可见宽度+ 滚动条不可见宽度。

如图所示:

js中scrollLeft, scrollTop, scrollWidth, scrollHeight分析

js中scrollLeft, scrollTop, scrollWidth, scrollHeight分析

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn