HTML5学堂-码匠 HTML5学堂

您当前位于:DOM文档操作 ——> JavaScript 滚动类特效常用属性 - scrollLeft等

JavaScript 滚动类特效常用属性 - scrollLeft等

2015/11/16 22:41:38 | 作者:HTML5学堂(码匠) | 分类:DOM文档操作 | 关键词:scrollTop,滚动,特效

scrollLeft等属性介绍

HTML5学堂:在平日中书写滚动类特效时,为了提升代码的扩展性,通常会使用变量替换掉常量,此时会经常用到scrollLeft、offsetWidth、clientWidth等属性,今天我们就一起走进这几个属性。

刘国利 - 独行冰海:最近日子,虽然身体稍微好些,但是也是被压得喘不过气来。主要也是自找的,原计划针对9班进行本年度的第四次课程大调整(主要是彻底调整JS)。正好带着8班,自己是很希望让8班也能够赶上这次调整课程,于是就有的忙了。本篇文章主要包括12种基本属性,以及关于滚动条的问题。麻烦各位多多包涵喽。

滚动类特效常用属性

scrollLeft 、scrollTop:设置或获取位于对象最顶/左端和窗口中可见内容的最顶/左端之间的距离。即当前上滚或左滚的距离。

scrollHeight、scrollWidth:获取对象可滚动的总高度/宽度

offsetLeft、offsetTop:获取当前对象与父元素之间的距离(不包含父元素的边框)

offsetWidth、 offsetHeight :获取元素自身的宽度/高度

clientLeft、 clientTop:效果和边框宽度相同,很少使用

clientWidth、 clientHeight :不含边框的元素自身的宽度/高度

一起来看下面这张图,会更形象一些:

scrollTop系列属性 HTML5学堂

滚动类特效常用属性 如何应用?

应用的地方:在书写一些效果时,如无缝滚动、放大镜、拖拽。我们会使用到元素的宽度或者内部元素到父级元素的距离等。那么这些值怎么书写呢?

一种最为简单的方法即为:直接使用常量。借助无缝滚动的功能代码,我们来查看一下这种方法。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - H5course</title>
  6.     <meta name="viewport" content="width=device-width,user-scalable=no">
  7.     <link rel="stylesheet" href="model/css/reset.css">
  8.     <style>
  9.         .wrap {
  10.             overflow: hidden;
  11.             width: 800px;
  12.             height: 400px;
  13.         }
  14.         .con {
  15.             height: 800px;
  16.         }
  17.         .con img {
  18.             display: block;
  19.             width: 100%;
  20.             height: 200px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="wrap" id="box">
  26.         <div class="con" id="con">
  27.             <img src="model/images/picscroll_4.jpg" alt="" title="">
  28.             <img src="model/images/sh.jpg" alt="" title="">
  29.             <img src="model/images/picscroll_4.jpg" alt="" title="">
  30.             <img src="model/images/sh.jpg" alt="" title="">
  31.         </div>
  32.     </div>
  33. <script>
  34.     var box = document.getElementById('box'),
  35.         con = document.getElementById('con');
  36.  
  37.     var timer = null;
  38.  
  39.     /*
  40.      * 功能:实现无间断的滚动
  41.      * 作者:独行冰海 - 刘国利
  42.      * 版权:HTML5学堂 http://www.h5course.com/
  43.      */
  44.     function scroll() {
  45.         box.scrollTop += 1;
  46.         // 到达一半位置返回初始状态
  47.         if (box.scrollTop == 400) {
  48.             box.scrollTop = 0;
  49.         };
  50.     }
  51.  
  52.     function startScroll() {
  53.         if (timer) {
  54.             clearInterval(timer);
  55.         };
  56.         timer = setInterval(scroll, 16);
  57.     }startScroll();
  58. </script>
  59. </body>
  60. </html>

在上面一段代码 box.scrollTop == 400当中,我们使用到了400这个常量。此处使用这个常量并不是很好,在于其扩展性比较差,也就是说,一旦页面CSS代码中的box和con的高度修改,会直接影响400这个值。

此时我们就可以使用上面的几个属性来替换掉400这个常量。将如下代码:

  1. if (box.scrollTop == 400) {
  2.     box.scrollTop = 0;
  3. };

修改为:

  1. if (box.scrollTop == con.offsetHeight / 2) {
  2.     box.scrollTop = 0;
  3. };

关于滚动条

在12种属性当中,存在如下两对:offsetHeight&clientHeight;offsetWidth&clientWidth。它们的区别在于,offsetWidth和offsetHeight是包含元素边框以及边框内部内容的,而clientWidth和clientHeight是不含元素边框的,是从元素的padding区域开始计算的。

特意这么说,其实是希望各位注意,从边框开始计算的,也会把滚动条的宽度/高度计算到结果之内,谷歌浏览器中,滚动条的宽/高度是17px,如果希望能够获取一个元素的padding和内容,需使用clientWidth和clientHeight,才能保证没有误差。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端