scroll

      scroll--译为‘滚动’,他是非常常用的属性。

    

    滚动宽高

        scrollHeight

          scrollHeight表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分(不要误解为只有出现滚动条才有scroll属性)

        scrollWidth

          scrollWidth表示元素的总宽度,包括由于溢出而无法展示在网页的不可见部分(不要误解为只有出现滚动条才有scroll属性)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 200px;
border: 2px solid #000;
padding: 10px;
margin: 7px;
}
</style>
<script>
window.onload = function(){
var box = document.querySelector('.box');
console.log('scrollHeight:'+box.scrollHeight);
console.log('scrollWidth:'+box.scrollWidth);
}
</script>
</head>
<body>
<div>
<div class="box"> </div>
</div>
</body>
</html>

  在chrome中显示:

可以看出,div.box的scrollHeight、scrollWidth打印出来了 注:scrollHeight有兼容性问题:chrome和safari浏览器中,scrollHeight包含padding-bottom;而IE和firefox不包含padding-bottom

  注意:1.没有滚动条时,scrollHeight与clientHeight属性结果相等,scrollWidth与clientWidth属性结果相等     2.存在滚动条时,但元素设置宽高大于等于元素内容宽高时,scroll和client属性的结果相等   3. 存在滚动条,但元素设置宽高小于元素内容宽高,即存在内容溢出的情况时,scroll属性大于client属性

  页面尺寸

    document.documentElement.clientHeight表示页面的可视区域的尺寸,而document.documentElement.scrollHeight表示html元素内容的实际尺寸。但是由于各个浏览器表现不一样,分为以下几种情况:

    【1】html元素没有滚动条时,IE和firefox的client和scroll属性始终相同,且返回可视区的尺寸大小;而safari和chrome表现正常,clientHeight返回可视区域大小,而scrollHeight返回元素内容大小;

    【2】html元素存在滚动条时,各个浏览器都表现正常。clientHeight返回可视区域大小,而scrollHeight返回元素内容大小

  滚动长度

    scrollTop

      scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素上方不可见内容的像素宽度

    scrollLeft

      scrollLeft属性表示被隐藏在内容区域左侧的像素数。元素未滚动时,scrollLeft的值为0,如果元素被水平滚动了,scrollLeft的值大于0,且表示元素左侧不可见内容的像素宽度

    当滚动条滚动到内容底部时,符合以下等式

        scrollHeight == scrollTop + clientHeight

    与scrollHeight和scrollWidth属性不同的是,scrollLeft和scrollTop是可写的

      [注意]为scrollLeft和scrollTop赋值为负值时,并不会报错,而是静默失败

  页面滚动

    理论上,通过document.documentElement.scrollTop和scrollLeft可以反映和控制页面的滚动;但是chrome和safari浏览器是通过document.body.scrollTop和scrollLeft来控制的

    

    所以,页面的滚动高度兼容写法是:var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop

    

    还有两个window的只读属性可以获取整个页面滚动的像素值,它们是pageXOffset和pageYOffset

    pageXOffset == scrollY

      pageXOffset表示水平方向上页面滚动的像素值 (可以理解为滚动条)

    pageYOffset==scrollX

      pageYOffset表示垂直方向上页面滚动的像素值

    滚动方法:

      scrollTo(x,y)---scrollTo(x,y)方法滚动当前window中显示的文档到指定地点,x和y 相当于left和top

      scrollBy(x,y)---scrollBy(x,y)方法滚动当前window中显示的文档到指定地点,x和y指定滚动的相对量偏移量

scroll事件是在window对象上发生的,它表示的是页面中相应元素的变化。当然,scroll事件也可以用在有滚动条的元素上

      scrollIntoView()---Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域   该方法可以接受一个布尔值作为参数。如果为true,表示元素的顶部与当前区域的可见部分的顶部对齐(前提是当前区域可滚动);如果为false,表示元素的底部与当前区域的可见部分的尾部对齐(前提是当前区域可滚动)。如果没有提供该参数,默认为true

  滚动事件

    scroll事件是在window对象上发生的,它表示的是页面中相应元素的变化。当然,scroll事件也可以用在有滚动条的元素上(很容易以为在document对象上发生的)

  滚动条

    滚动条在网页中经常见到,却并没有受到足够的重视。只有当因为滚动条的问题需要处理兼容性时,才进行调试操作。

    出现滚动条的条件:

      滚动条和overflow是紧密相关的。只有当父级的overflow的值是auto或scroll,并且元素的内容超出元素区域时,才有可能出现滚动条

    滚动条到底在什么地方?

      无论什么浏览器,默认滚动条均来自<html>,而不是<body>。因为<body>元素默认有8px的margin。若滚动条来自<body>元素,则滚动条与页面则应该有8px的间距,实际上并没有间距,所以滚动条来自<html>元素

    滚动条是否会占用浏览器的可用宽度?

      会的。chrome/firefox/IE 17px     safari 21px

    如何去除默认滚动条?

      html{overflow:hidden;}

      

    

 

JavaScript---详解scroll的更多相关文章

  1. Day03 javascript详解

    day03 js 详解 JavaScript的基础 JavaScript的变量 JavaScript的数据类型 JavaScript的语句 JavaScript的数组 JavaScript的函数 Ja ...

  2. Unicode与JavaScript详解

    本文为转载内容 一.Unicode是什么? Unicode源于一个很简单的想法:将全世界所有的字符包含在一个集合里,计算机只要支持这一个字符集,就能显示所有的字符,再也不会有乱码了. 它从0开始,为每 ...

  3. javascript 详解数组

      概念 数组创建 数组读写 数组 VS. 一般对象 相同点 不同点 稀疏数组 数组的length属性 元素增删 数组迭代 二维数组 数组方法 Array.prototype.join Array.p ...

  4. 【原创教程】JavaScript详解之语法和对象

    JavaScript的好的想法:函数.弱类型.动态对象和一个富有表现力的对象字面量表示法. JavaScript的坏的想法:基于全局变量的编程模型.   好了,不管他是好的还是坏的,都是我的最爱,下面 ...

  5. JavaScript详解

    JavaScript可以说是web开发中必备的一种技术.它具有灵活,简单,高效等特点.这次DRP中大量的用到了js,让自己对js有了更深的了解.看完这个以后还回去看了一下牛腩的js视频.把以前没看的看 ...

  6. Unicode与JavaScript详解 [很好的文章转]

    上个月,我做了一次分享,详细介绍了Unicode字符集,以及JavaScript语言对它的支持.下面就是这次分享的讲稿. 一.Unicode是什么? Unicode源于一个很简单的想法:将全世界所有的 ...

  7. Web前端之Javascript详解20180330

    一.javascript概述 javascript是基于对象和事件的脚本语言. 特点: 1.安全性(不允许直接访问本地硬盘(因为是被远程的浏览器解释)),它可以做的就是信息的动态交互 2.跨平台性(只 ...

  8. JavaScript: 详解正则表达式之三

    在上两篇文章中博主介绍了JavaScript中的正则常用方法和正则修饰符,今天准备聊一聊元字符和高级匹配的相关内容. 首先说说元字符,想必大家也都比较熟悉了,JS中的元字符有以下几种: / \ | . ...

  9. JavaScript: 详解正则表达式之一

    正则表达式是一个精巧的利器,经常用来在字符串中查找和替换,JavaScript语言参照Perl,也提供了正则表达式相关模块,开发当中非常实用,在一些类库或是框架中,比如jQuery,就存在大量的正则表 ...

  10. javascript详解1

    推荐学习链接: https://book.apeland.cn/details/356/ http://es6.ruanyifeng.com/#README https://developer.moz ...

随机推荐

  1. MTA---smtp(25,postfix,sendmail),Pop3(110,Devocot), MUA(foxmail) IMAP(server,client rsync)

    利用telnet进行SMTP的验证 =========先计算BASE64编码的用户名密码,认证登录需要用到=========== [crazywill@localhost crazywill]$ pe ...

  2. Xshell连接阿里云Centos6.8

    由于我将xshell更新到了Xshell v5.0 Build 1332,在连接阿里云服务器的时候遇到了一些问题. 以前我登录到服务器的时候直接输入登录密码就行了,但是现在由于openssh服务器类型 ...

  3. mysql 数据操作 单表查询 group by 聚合函数 没有group by情况下

    聚合函数只能用在组里使用 #没有group by 则默认算作一组 取出所有员工的最高工资 mysql> select max(salary) from employee; +---------- ...

  4. nodejs中Async详解之一:流程控制

    为了适应异步编程,减少回调的嵌套,我尝试了很多库.最终觉得还是async最靠谱. 地址:https://github.com/caolan/async Async的内容分为三部分: 流程控制:简化十种 ...

  5. 从WW中剥离一个三维场景框架

    从WW中剥离一个三维场景框架,初步实现的一个.可以绘制一个三角形,但是不能够控制摄像机,没有增加鼠标事件.没有投影,世界变幻之类的东西.以后会不断学习逐步增加进来. 下载地址 下载V1.0.0.2

  6. 121. Best Time to Buy and Sell Stock(股票最大收益)

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  7. VS2010/MFC编程入门之十二(对话框:非模态对话框的创建及显示)

    上一节鸡啄米讲了模态对话框及其弹出过程,本节接着讲另一种对话框--非模态对话框的创建及显示. 鸡啄米已经说过,非模态对话框显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.鸡啄米会将 ...

  8. Buffer flip()方法

    英文API:Flips this buffer. The limit is set to the current position and then the position is set to ze ...

  9. SpringMVC中@pathVariable和@RequestParam注解的区别

    @pathVariable和@RequestParam的区别 @pathVariable:是从路径中获取变量,也就是把路径当做变量 @RequestParam:是从请求里面获取参数 案例分析: /Sp ...

  10. 前端学习笔记之CSS浮动浅析

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...