定位父级:(定位父级offsetParent的定义是:与当前元素最近的经过定位(position不等于static)的父级元素)
display:absolute; 相对定位
display:relative; 绝对定位
.... 注意:当元素自身有fixed固定定位时,我们知道固定定位的元素相对于视口进行定位,此时没有定位父级,offsetParent的结果为null (IE为<body>)
定位父级,可读,可写 (let box = box1.offsetParent)
onscroll :鼠标滚轮事件
一定要有滚动条的时候才能用。。。。
可以给定位父级加:overflow:auto / overflow-y:scroll / ...... 。当auto时,box_child 的高 / 宽度要大于 box_father
此时就能出现滚动条,并且可以滚动了
<div id="box_father"> <div id="box_child"></div> </div>
box2.onscroll = function(){
xxx
}
scroll():
同下
scrollTo() :
专门用来写滚动条的距离的,有滚动条的前提下才能使用,让元素滚动到指定的位置,单位px
let box2 = docoument.getElementById("box2")
box2.scrollTo(0,100) //移动到绝对位置Y轴为100px的位置
scrollBy() :
方法可把内容滚动指定的像素数。
注意: 要使此方法工作 window 滚动条的可见属性必须设置为true!
语法:scrollBy(xnum,ynum)
实例:
function scrollWindow(){ window.scrollBy(100,100); }
测试比较 scroll()、scrollTo()、scrollBy()三个方法的区别:
<body>
<div id="div_father">
<div id="div_child"></div>
</div>
<script>
document.onclick = function () {
clearInterval(scroll);
}
let scroll = setInterval(() => {
console.log(div_child)
// div_father.scroll(0, 100) //移动到绝对位置的100px处
// div_father.scrollTo(0, 100) //移动到绝对位置的100px处
// div_father.scrollTop = 100; //移动到绝对位置的100px处
div_father.scrollBy(0, 100) //移动到相对位置的100px处(基于上一次的位置再次移动)
div_child.innerText = div_father.scrollTop
}, 1000)
</script>
</body>
测试效果如下:
- 1.scrollBy() 会使元素每隔一秒从当前的滚动条位置向下滚动10px,这是一个设置相对滚动条位置的方法。
- 2.scrollTo() 和 scroll() 方法是一样的,都是将元素滚动到指定位置,它们都是设置绝对滚动条位置。
另:元素还有一个设置或读取滚动条位置的属性:element.scrollTop,这是一个读写属性,如 element.scrollTop = 50; 便是设置元素的滚动条位置为 50px;