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,才能保证没有误差

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

3d效果的图片轮播

CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换。3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用。     ...

3105
来自专栏前端布道

详解各种获取元素宽高及位置的属性

offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局...

2958
来自专栏葡萄城控件技术团队

深入CSS,让网页开发少点“坑”

 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Sta...

1729
来自专栏编程

深入CSS,让网页开发少点“坑”

问题:我怎么才能收到你们公众号平台的推送文章呢? 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的...

17610
来自专栏非著名程序员

Android 属性动画详解,属性动画基本用法

Hello,大家好,今天又来装逼了,装逼也上瘾啊,最近公司不是特别忙,我想这也就是我出来装逼的最好时机吧!额,,哈哈,进入正题。如有疑问欢迎留言,如有谬误欢迎批...

1955
来自专栏郭霖

Android属性动画完全解析(上),初识属性动画的基本用法

在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(frame-by-frame...

1897
来自专栏练小习的专栏

可视化格式模型-定位系统

CSS2.1中,一个框(box,就是元素形成的方块等)可以根据三种定位体系布局。 常规流(Normal flow) 常规流,是对 normal flow的直译。...

1666
来自专栏电光石火

js 获取浏览器高度和宽度值(多浏览器)

IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==>...

2516
来自专栏前端萌媛的成长之路

CSS盒子模型

1423
来自专栏偏前端工程师的驿站

javascript实例:逐条记录停顿的走马灯

效果: ? 需求: 1.记录循环滚动; 2.每组记录之间不能有留白; 3.每条记录上移到容器的顶部时要停顿一下; 4.鼠标移入容器时停止滚动,移出时继续滚动。 ...

1715

扫描关注云+社区