学完dom的距离属性就可以做的案例,滚动小球!
先看一下效果吧
一、基础知识
DOM距离属性
获取window的滚动距离
window.pageXOffset,window.pageYOffset
获取元素的滚动距离
tag.scrollLeft,tag.scrollTop
获取window的可视距离
window.innerWidth,window.innerHeight
元素的可视距离=内容区域+padding-滚动条
tag.clientWidth,tag.clientHeight
元素控件的距离=内容区+padding+border
tag.offsetWidth,tag.offsetHeight
被撑开的距离=子元素+padding-滚动条
tag.scrollWidth,tag.scrollHeight
元素的位置
offsetLeft, tag.offsetTop
二、实现代码
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
<div class