再说意义之前，前说一下这两个属性的适用范围：

注意：这两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。且overflow的值不能为visible，但可以为hidden,auto,scroll的之中，但是hidden最常见。

注意：在对这两个参数设置值时，直接用数字就可以了，否者不起作用。

javascript中元素的scrollLeft和scrollTop属性的参数意义：

scrollLeft：是该元素的显示（可见）的内容与该元素实际的内容的距离。

即设置scrollleft就如同你拖动水平滚动条一样。假如你的页面太大，浏览器的宽度不够，就会出现滚动条。一开始scrollLeft的值为0，你就看到了你的页面最左边的内容。而不显示超过浏览器的那部分，当你向右拖动滚动条时，scrollLeft的值在增大，你就看到了右边因隐藏的东西，而看不到左边隐藏的部分。他就会从scrollLeft的位置开始显示，而不显示0-scrollLeft的元素内容。即：该元素的显示位置与实际内容的位置的距离变大。。。

简单了说：元素会从scrollLeft的位置显示该元素的内容。

假如不懂的话，你就把元素的所有内容都在纸画出拉，元素的最左边为0,显示的宽度为10,那就就能看到0-10的位置，假如scrollLeft为20的话，你就能看到从20的位置开始显示，向后显示10个

那么scrollTop和scrollLeft一样，只不过变成了垂直了而已。

实现内容的滚动效果（其中内容可以是任何东西：图片，文字，等等）

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>图片滚动</title>

 </head>

 <body>

 <style type="text/css">

 <!--

 #demo {

 background: #FFF;

 /*必须的*/

 overflow:hidden;

 border: 1px dashed #CCC;

 width: 100px;

 }

 #demo img {

 border: 3px solid #F2F2F2;

 }

 #indemo {

 float: left;

 width: 800%;

 }

 #demo1 {

 float: left;

 }

 #demo2 {

 float: left;

 }

 -->

 </style>

 <div id="demo">

 <div id="indemo">

 <div id="demo1">

 <!--你这里可以变成图片-->

 <a href="#">0</a>

 <a href="#">1</a>

 <a href="#">2</a>

 <a href="#">4</a>

 <a href="#">5</a>

 <a href="#">6</a>

 <a href="#">7</a>

 <a href="#">8</a>

 <a href="#">9</a>

 <a href="#">0</a>

 </div>

 <div id="demo2"></div>

 </div>

 </div>

 <script>

 <!--

 var speed=10;

 var tab=document.getElementById("demo");

 var tab1=document.getElementById("demo1");

 var tab2=document.getElementById("demo2");

 //用于让tab1的内容与tab2的内容一样

 tab2.innerHTML=tab1.innerHTML

 function Marquee(){

 //当元素要显示tab2的内容时，让他去显示tab1的内容，因为tab1与tab2的内容一样，就实现了滚动，因为速度太快了，所以你就堪称他是连续的了

 if(tab2.offsetWidth-tab.scrollLeft<=0){

 tab.scrollLeft-=tab1.offsetWidth

 }

 else{

 tab.scrollLeft++;

 }

 }

 var MyMar=setInterval(Marquee,speed);

 tab.onmouseover=function() {clearInterval(MyMar)};

 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

 -->

 </script>

 </body>

 </html>

转自

转自：http://m.blog.csdn.net/article/details?id=16903219

javascript中元素的scrollLeft和scrollTop属性说明的更多相关文章

  1. javascript中top、clientTop、scrollTop、offsetTop的讲解(转载加总结)

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

  2. javascript中top、clientTop、scrollTop、offsetTop的讲解

    下面结合各上图介绍一下各个属性的作用: 一.offsetTop属性: 此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离.所谓的 ...

  3. [转贴]JavaScript中Array（数组）的属性和方法

    数组有四种定义的方式 使用构造函数:var a = new Array();var b = new Array(8); var c = new Array("first", &qu ...

  4. javascript中数组常用的方法和属性

    前言 在javascript中,数组是一种非常重要的数据类型,我们时常会和它打交道,最近在开发项目中频繁的使用到数组,但是自己对数组的众多方法已经是非常模糊了,为了方便自己以后能够更好的使用数组中的属 ...

  5. JavaScript中.、[]与setAttribute()在设置属性上的区别

    .和[] javaScript.和[]既可以对所有js对象设置属性,但是对于DOM对象它设置的属性有些特殊.对于元素DOM标准属性,实现属性值的设置/更改;对于元素DOM非标准属性,仅在js中有效,在 ...

  6. 深入理解javascript描述元素内容的5个属性

    × 目录 [1]innerHTML [2]outerHTML [3]innerText[4]outerText[5]textContent 前面的话 <p>This is a <i& ...

  7. 关于JavaScript中实现继承，及prototype属性

    感谢Mozilla 让我弄懂继承. JavaScript有八种基本类型,函数属于object.所以所有函数都继承自object.//扩展:对象,基本上 JavaScript 里的任何东西都是对象,而且 ...

  8. JavaScript中Array（数组）的属性和方法（转）

    数组有四种定义的方式 使用构造函数:var a = new Array();var b = new Array(8);var c = new Array("first", &quo ...

  9. JavaScript中内置对象的一些属性及方法

    Javascript对象总结 JS中内置了17个对象,常用的是Array对象.Date对象.正则表达式对象.string对象.Global对象 Array对象中常用方法: Concat():表示把几个 ...

随机推荐

  1. Highcharts属性中英文参照

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. PHP中获取内网用户MAC地址（WINDOWS/linux）的实现代码

    做一个内网根据MAC地址自动登录的应用,在WINDOW 2003可以正常使用,函数如下   复制代码 代码如下: function ce_getmac() { if(PHP_OS == 'WINNT' ...

  3. [整理]Android开发（一）环境安装

    所有相关下载均可通过http://www.androiddevtools.cn/下载 安装JAVA JDK 下载Windows x64 180.44 MB jdk-8u45-windows-x64.e ...

  4. CSS 有关margin padding

  5. 【bzoj2060】[Usaco2010 Nov]Visiting Cows拜访奶牛

    题目描述 经过了几周的辛苦工作,贝茜终于迎来了一个假期.作为奶牛群中最会社交的牛,她希望去拜访N(1<=N<=50000)个朋友.这些朋友被标号为1..N.这些奶牛有一个不同寻常的交通系统 ...

  6. Bots(逆元，递推）

    H. Bots time limit per test 1.5 seconds memory limit per test 256 megabytes input standard input out ...

  7. 机器学习之Hash集合问题

    问题来源与七月学习之 (3.x线性代数与矩阵运算基础)

  8. Ubuntu 14 修改默认打开方式

    通过研究,有三种修改方式. 方式一: 修改路径:右上角“系统设置” -> 详细信息 -> 默认应用程序 但是,有个缺陷,可修改的项比较少. 方式二: 例如,修改pdf的打开方式,只要查看任 ...

  9. InnoDB锁机制分析

    InnoDB锁机制常常困扰大家,不同的条件下往往表现出不同的锁竞争,在实际工作中经常要分析各种锁超时.死锁的问题.本文通过不同条件下的实验,利用InnoDB系统给出的各种信息,分析了锁的工作机制.通过 ...

  10. Java多线程基础知识（三）

    一. 管道输入/输出流 它和其它文件输入/输出流或网络输入/输出流的不同之处,它主要是线程之间的数据传输,而传输的媒介是内存. 管道输入/输出流主要包含四中实现: 1. PipedOutputStre ...