jsz中scrollTop,clientTop,offsetTop
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsz中scrollTop,clientTop,offsetTop相关的知识,希望对你有一定的参考价值。
参考技术A
先来一张名气很大的图
看着实在是好晕,于是各种整理后手动画了一个:
发现主要分为几部分:
当定位时,position的移动的距离,
scrollHeight:文档总高度,可滚动总高度(包含元素本身,内外边距,边框)
scrollWidth:文档总宽度,可滚动总宽度(包含元素本身,内外边距,边框)
scrollTop:相对于滚动条顶部的偏移,指滚动条顶端与当前滚动条位置的距离
scrollLeft:相当于滚动与左端的偏移
clientHeight:可视区域高度(不包含边框,滚动条)
clientWidth:可视区域宽度
clientTop:内容区域相对于整个元素的左上角,当有边距时为边距的厚度,无边距时可以为0
clientLeft:内容区域相对于整个区域的左上角,有边距时为边距的宽度,可以为0
offsetHeight:获取自身元素(包含边距,滚动条)
offsetWidth:获取自身元素(包含边距,滚动条)
offsetTop:相对于最近定位祖元素的偏移,(祖元素必须是position,relative,absloute,fixed)
offsetLeft:同offsetTop
返回第一个祖定位元素,若父级元素无定位返回body,若父级元素已经定位返回相对应父级对应元素。
html offsetTop,clientTop,scrollTop,offsetLeft ...之间的差异...
<style>
body{
background-color: #ddd;
}
.container{
height:200px;
width: 400px;
border-style:dashed;
border-color:#aaa;
margin:150px auto;
/* overflow:hidden; */
overflow:scroll;
}
.content{
width:640px;
height:292px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Leonardo_Da_Vinci_-_Annunciazione.jpeg/320px-Leonardo_Da_Vinci_-_Annunciazione.jpeg);
background-size: 640px 292px;
}
.scroll-x {
background-color: rgba(0,0,0,0);
border:2px;
border-style:solid;
border-color:#00c;
color:#00c;
position:absolute;
}
.client-x {
background-color: rgba(0,0,0,0);
border-top-width:0; border-left-width:0;
border-bottom-width:2px; border-right-width:2px;
border-style:solid;
border-color:#0c0;
color:#0c0;
position:absolute;
}
.offset-x {
background-color: rgba(0,0,0,0);
border-top-width:2px; border-left-width:2px;
border-bottom-width:0; border-right-width:0;
border-style:solid;
border-color:#f00;
color:#f00;
position:absolute;
}
</style>
<form id="container-border-control" action="javascript:false">
<label for="value">border-width:</label>
<input type="text" name="value">
<button type="button" name="swap">swap !</button>
</form>
<button id="scroll-button">scroll !</button>
<div id="container" class="container">
<div class="content"></div>
</div>
<p>
<a href="https://commons.wikimedia.org/wiki/Commons:Reuse_of_PD-Art_photographs#Japan">Reuse of PublicDomain-Art photographs</a>
</p>
see also:
<ul>
<li><a href="http://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight/22675563#22675563">What is offsetHeight, clientHeight, scrollHeight? | stackoverflow</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop">offsetTop | MDN</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop">clientTop | MDN</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop">scrollTop | MDN</a></li>
<li><a href="http://jsfiddle.net/shibualexis/yVhgM/3/">http://jsfiddle.net/shibualexis/yVhgM/3/</a></li>
</ul>
<script>
(function(){
var container = document.getElementById('container');
var refreshes = [];
container.style.borderWidth = 20; // initial value
var container_border_ctrl = document.getElementById('container-border-control');
container_border_ctrl.elements.value.value = container.style.borderWidth;
container_border_ctrl.elements.swap.addEventListener('click',function(){
container.style.borderWidth = container_border_ctrl.elements.value.value;
});
function refresh(src, dest, echo, prop_prefix, compute_left, compute_top) {
var width_prop = prop_prefix+'Width';
var height_prop = prop_prefix+'Height';
var top_prop = prop_prefix+'Top';
var left_prop = prop_prefix+'Left';
dest.style.left = compute_left(src) + 'px';
dest.style.top = compute_top(src) + 'px';
dest.style.height = src[height_prop]+'px';
dest.style.width = src[width_prop] +'px';
echo.innerHTML = width_prop + ' X ' + height_prop +
'( ' + src[width_prop] + ' x '+ src[height_prop] + " ),<br />" +
top_prop + ' X ' + left_prop +
'( ' + src[top_prop] + ' x '+ src[left_prop] + ' )';
}
refreshes.push((function(){
var frame = document.createElement("div");
var echo = document.createElement("div");
document.body.appendChild(frame);
frame.appendChild(echo);
frame.classList.add('offset-x');
echo.style.marginTop = '-2.5em';
var $refresh = refresh.bind(null, container, frame, echo, 'offset',
function(elm){return elm.offsetLeft;},
function(elm){return elm.offsetTop;});
return $refresh;
})());
refreshes.push((function(){
var frame = document.createElement("div");
var echo = document.createElement("div");
document.body.appendChild(frame);
frame.appendChild(echo);
frame.classList.add('client-x');
echo.style.position = 'absolute';
echo.style.bottom = 0;
echo.style.right = 0;
echo.style.marginBottom = '-4.5em';
var $refresh = refresh.bind(null, container, frame, echo, 'client',
function(elm){return elm.offsetLeft + elm.clientLeft;},
function(elm){return elm.offsetTop + elm.clientTop;});
return $refresh;
})());
refreshes.push((function(){
var frame = document.createElement("div");
var echo = document.createElement("div");
document.body.appendChild(frame);
frame.appendChild(echo);
frame.classList.add('scroll-x');
echo.style.position = 'absolute';
echo.style.bottom = 0;
echo.style.right = 0;
echo.style.marginBottom = '-2.5em';
var $refresh = refresh.bind(null, container, frame, echo, 'scroll',
function(elm){return elm.offsetLeft + elm.clientLeft - elm.scrollLeft;},
function(elm){return elm.offsetTop + elm.clientTop - elm.scrollTop;});
window.addEventListener('resize',$refresh);
$refresh();
document.getElementById('scroll-button').onclick = function(){
(new Promise(function(next) {
var max = container.scrollWidth - container.clientWidth
var step = Math.floor(max / 20);
function loop(amount){
$refresh();
setTimeout(function() {
container.scrollLeft = amount;
if (amount < max) loop(Math.min(amount+step, max));
else next();
}, 100);
}
loop(0);
})).then(function() {
return new Promise(function(next) {
var max = container.scrollHeight - container.clientHeight;
var step = Math.floor(max / 20);
function loop(amount){
$refresh();
setTimeout(function() {
container.scrollTop = amount;
if (amount < max) loop(Math.min(amount+step, max));
else next();
}, 100);
}
loop(0);
});
}).then(function () {
return new Promise(function(next) {
var top_step = Math.floor(container.scrollTop / 20);
var left_step = Math.floor(container.scrollLeft / 20);
function loop(amount_top, amount_left){
$refresh();
setTimeout(function() {
container.scrollTop = amount_top;
container.scrollLeft = amount_left;
if (amount_top >= 0) loop(Math.max(amount_top - top_step, 0),
Math.max(amount_left - left_step, 0));
}, 100);
}
loop(container.scrollTop, container.scrollLeft);
});
})
}
return $refresh;
})());
refreshes.forEach(function(r){
r();
window.addEventListener('resize',r);
container_border_ctrl.elements.swap.addEventListener('click', setInterval.bind(null,r,0));
});
})();
</script>
以上是关于jsz中scrollTop,clientTop,offsetTop的主要内容,如果未能解决你的问题,请参考以下文章
html offsetTop,clientTop,scrollTop,offsetLeft ...之间的差异...
clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop
scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明
js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?
页面上clientTop,offsetTop,scrollTop的理解,js元素的event.x/.clientX等位置的理解
jsz中的作用域与上下文