scrollLeft等属性介绍
HTML5学堂:在平日中书写滚动类特效时,为了提升代码的扩展性,通常会使用变量替换掉常量,此时会经常用到scrollLeft、offsetWidth、clientWidth等属性,今天我们就一起走进这几个属性。本篇文章主要包括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,才能保证没有误差
- 3097: Hash Killer I
- 3390: [Usaco2004 Dec]Bad Cowtractors牛的报复
- 1684: [Usaco2005 Oct]Close Encounter
- 算法模板——Dinic最小费用最大流
- 算法模板——Dinic网络最大流 1
- SQL Server 使用全文索引进行页面搜索
- 2764: [JLOI2011]基因补全
- 1000: A+B Problem(NetWork Flow)
- 博弈论进阶之Multi-SG
- 2929: [Poi1999]洞穴攀行
- SQL Server 执行计划缓存
- 1081: [SCOI2005]超级格雷码
- 1715: [Usaco2006 Dec]Wormholes 虫洞
- 博弈论入门之斐波那契博弈
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- java线程池(一):java线程池基本使用及Executors
- java线程池(二):聊聊newFixedThreadPool(1)和newSingleThreadExecutor()的区别
- SAP RFC函数RFC_READ_TABLE使用与优化
- 数据库PostrageSQL-升级一个PostgreSQL集簇
- 数据库PostrageSQL-用 SSL 进行安全的 TCP/IP 连接
- 数据库PostrageSQL-使用SSH隧道的安全 TCP/IP 连接
- 快速学习-Saturn(英文版入门指引)
- Promise.all 踩坑记录
- Springboot统一返回接口+统一异常处理+后端参数校验
- 面试Java基础问题汇总 part2
- org.springframework.util.xml.SimpleSaxErrorHandler warning org.xml.sax.SAXParseException; systemId:
- 贷款违约预测-Task1 赛题理解
- Android功耗优化(7)---如何分析wakelock(wakeup source)持锁问题
- 一道有意思的腾讯算法面试题
- 关于 JavaScript 错误处理的最完整指南(上半部)