scrollLeft等属性介绍
HTML5学堂：在平日中书写滚动类特效时，为了提升代码的扩展性，通常会使用变量替换掉常量，此时会经常用到scrollLeft、offsetWidth、clientWidth等属性，今天我们就一起走进这几个属性。
刘国利 - 独行冰海：最近日子，虽然身体稍微好些，但是也是被压得喘不过气来。主要也是自找的，原计划针对9班进行本年度的第四次课程大调整（主要是彻底调整JS）。正好带着8班，自己是很希望让8班也能够赶上这次调整课程，于是就有的忙了。本篇文章主要包括12种基本属性，以及关于滚动条的问题。麻烦各位多多包涵喽。
滚动类特效常用属性
scrollLeft 、scrollTop：设置或获取位于对象最顶/左端和窗口中可见内容的最顶/左端之间的距离。即当前上滚或左滚的距离。
scrollHeight、scrollWidth：获取对象可滚动的总高度/宽度
offsetLeft、offsetTop：获取当前对象与父元素之间的距离（不包含父元素的边框）
offsetWidth、 offsetHeight ：获取元素自身的宽度/高度
clientLeft、 clientTop：效果和边框宽度相同，很少使用
clientWidth、 clientHeight ：不含边框的元素自身的宽度/高度
一起来看下面这张图，会更形象一些：
滚动类特效常用属性 如何应用？
应用的地方：在书写一些效果时，如无缝滚动、放大镜、拖拽。我们会使用到元素的宽度或者内部元素到父级元素的距离等。那么这些值怎么书写呢？
一种最为简单的方法即为：直接使用常量。借助无缝滚动的功能代码，我们来查看一下这种方法。
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5学堂 - H5course</title>
-
<meta name="viewport" content="width=device-width,user-scalable=no">
-
<link rel="stylesheet" href="model/css/reset.css">
-
<style>
-
.wrap {
-
overflow: hidden;
-
width: 800px;
-
height: 400px;
-
}
-
.con {
-
height: 800px;
-
}
-
.con img {
-
display: block;
-
width: 100%;
-
height: 200px;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="wrap" id="box">
-
<div class="con" id="con">
-
<img src="model/images/picscroll_4.jpg" alt="" title="">
-
<img src="model/images/sh.jpg" alt="" title="">
-
<img src="model/images/picscroll_4.jpg" alt="" title="">
-
<img src="model/images/sh.jpg" alt="" title="">
-
</div>
-
</div>
-
<script>
-
var box = document.getElementById('box'),
-
con = document.getElementById('con');
-
-
var timer = null;
-
-
/*
-
* 功能：实现无间断的滚动
-
* 作者：独行冰海 - 刘国利
-
* 版权：HTML5学堂 http://www.h5course.com/
-
*/
-
function scroll() {
-
box.scrollTop += 1;
-
// 到达一半位置返回初始状态
-
if (box.scrollTop == 400) {
-
box.scrollTop = 0;
-
};
-
}
-
-
function startScroll() {
-
if (timer) {
-
clearInterval(timer);
-
};
-
timer = setInterval(scroll, 16);
-
}startScroll();
-
</script>
-
</body>
-
</html>
在上面一段代码 box.scrollTop == 400当中，我们使用到了400这个常量。此处使用这个常量并不是很好，在于其扩展性比较差，也就是说，一旦页面CSS代码中的box和con的高度修改，会直接影响400这个值。
此时我们就可以使用上面的几个属性来替换掉400这个常量。将如下代码：
-
if (box.scrollTop == 400) {
-
box.scrollTop = 0;
-
};
修改为：
-
if (box.scrollTop == con.offsetHeight / 2) {
-
box.scrollTop = 0;
-
};
关于滚动条
在12种属性当中，存在如下两对：offsetHeight&clientHeight；offsetWidth&clientWidth。它们的区别在于，offsetWidth和offsetHeight是包含元素边框以及边框内部内容的，而clientWidth和clientHeight是不含元素边框的，是从元素的padding区域开始计算的。
特意这么说，其实是希望各位注意，从边框开始计算的，也会把滚动条的宽度/高度计算到结果之内，谷歌浏览器中，滚动条的宽/高度是17px，如果希望能够获取一个元素的padding和内容，需使用clientWidth和clientHeight，才能保证没有误差。
欢迎沟通交流~HTML5学堂
极客编程技术分享
