滚动条
滚动条距离注意点:
<body>
<div style="height: 400px; border: 1px solid #000">
</div>
<button>点击</button>
document.documentElement.style.overflowY = 'auto'
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function () {
window.scrollTo(0, 400)
}
这里页面滚动的距离为400px;
元素到窗口距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.parent {
/*position: absolute;*/
/*top: 100px;*/
/*left: 200px;*/
width: 300px;
height: 300px;
margin: 100px;
background-color: #999;
overflow: hidden;
}
.son {
/*position: absolute;*/
/*top: 100px;*/
/*left: 100px;*/
width: 100px;
height: 100px;
margin: 100px;
/*padding: 10px;*/
background-color: #00FF00;
}
</style>
<body>
<div class="parent">
<div class="son">
</div>
</div>
<script type="text/javascript">
var son = document.getElementsByClassName('son')[0];
son.offsetLeft//208
son.offsetParent
// <body class="localhost_63342" >
// </body>
</script>
</body>
</html>
添加如下:
body{
margin: 0;
}
son.offsetLeft
//200
再看一种情况(父级有定位的时候):
<style>
body {
margin: 0;
}
.parent {
position: absolute;
top: 100px;
left: 100px;
width: 300px;
height: 300px;
margin: 100px;
background-color: #999;
overflow: hidden;
}
.son {
/*position: absolute;*/
/*top: 100px;*/
/*left: 100px;*/
width: 100px;
height: 100px;
margin: 100px;
/*padding: 10px;*/
background-color: #00FF00;
}
</style>
<div class="parent">
<div class="son">
</div>
</div>
var son = document.getElementsByClassName('son')[0];
son.offsetLeft//100
// offsetLeft只认其父级的定位元素,父级有定位元素，就只认其父级;
//父级没有定位元素,就一直往上找,一直找到可视区域的边框
son.offsetParent
// <div class="parent"></div>
原文始发于微信公众号（迪哥讲事）：JS基本功系列-DOM记录-滚动条
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论