一、元素的 client offset scroll 三个系列

clientWidth / clientHeight / clientTop / clientLeft
offsetWidth / offsetHeight / offsetLeft / offsetTop / offsetParent
scrollWidth / scroHeight / scrollTop / scrollLeft
这十三个属性 前面十一个是只读属性 scrollTop和scrollLeft是既可读也可写

测试滚动条的距离
返回Y轴window.pageYOffset
返回X轴window.pageXOffset

获取整个文档的高：
document.body.scrollHeight || document.documentElement.scrollHeight

获取浏览器一屏幕的高（浏览器的可视区）：
document.body.clientHeight || document.documentElement.clientHeight

二、window下的两个事件

onscroll 当滚动条滚动的时候出发
onresize 当窗发生改变时触发

三、让滚动条滚动

window.scroll（x，y） 不累加
window.scrollTo（x，y） 跟上面一样
window.scrollBy（x，y） 会累加

从零开始的全栈工程师——js篇2.18（js的运动）的更多相关文章

  1. 从零开始的全栈工程师——html篇1

    全栈工程师也可以叫web 前端 H5主要是网站 app 小程序 公众号这一块 HTML篇 html(超文本标记语言,标记通用标记语言下的一个应用.) “超文本”就是指页面内可以包含图片.链接,甚至音乐 ...

  2. 从零开始的全栈工程师——html篇1.2

    起名方式与CSS 一.起名方式(起名方式也叫选择器) 起名的目的是为了给标签添加属性 常见的3种选择器有 标签选择器   id选择器(使用的时候加#)    class选择器(使用的时候加.) 样式的 ...

  3. 从零开始的全栈工程师——html篇1.8（知识点补充与浏览器兼容性）

    知识点补充 一.浏览器的兼容问题(关于浏览器的兼容问题 有很多大佬已经解释的很清楚了 这个得自己百度去多花点时间去了解 这里咱们只说一下前面的漏点) 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题 ...

  4. 从零开始的全栈工程师——html篇1.7

    position定位与表单 一.position 1.Position细说 Position:relative; Left:100px; Top:100px; Position:absolute; L ...

  5. 从零开始的全栈工程师——html篇1.5

    列表与边距探讨和行块 一.列表 1.无序列表(UL) 1)内部必须有子标签<li></li>2)天生自带内外边距 p也是自带 大家会发现用UL的时候内容前面会出现一个像这样的一 ...

  6. 从零开始的全栈工程师——html篇1.4

    背景与边框 一.背景(backgound) 1.背景颜色:background-color:red;(简写:background:color;) 备注:ie9以下给body设置background-c ...

  7. 从零开始的全栈工程师——html篇1.3

    文本.字体css样式与前期英语单词汇总 一.文本样式(text) 1.颜色:color:red; 2.文本对齐方式:text-align:left/center/right/justify; left ...

  8. 从零开始的全栈工程师——PHP篇 ( 单词汇总 ) ( php解决文字乱码 )

    解决乱码: header("Content-Type: text/html;charset=utf-8"); 单词 局部的: local 全局的: global 静态的: stat ...

  9. 从零开始的全栈工程师——html篇1.6

    浮动与伪类选择器 一.浮动(float) 1.标准文档流 标准文档流是一种默认的状态 浏览器的排版是根据元素的特征(块和行级) 从上往下 从左往右排版 这就是标准文档流 2.浮动(float)floa ...

  10. 从零开始的全栈工程师——js篇2.1（js开篇）

    JS开篇 一.js介绍 全称 javascript 但不是java 他是一门前台语言 而java是后台语言js作者 布兰登·艾奇 前台语言:运行在客户端的后台语言:跟数据库有关的 能干什么?    页 ...

随机推荐

  1. django 学习之DRF (二)

    Django学习之DRF02 Serializer序列化器之反序列化操作    1.调⽤序列化器进⾏验证        0.准备序列化器 class BookInfoSerializer(serial ...

  2. React Native 在用户网络故障时自动调取缓存

    App往往都有缓存功能,例如常见的新闻类应用,如果你关闭网络,你上次打开App加载的数据还在,只是不能加载新的数据了. 我的博客bougieblog.cn,欢迎前来尬聊. 集中处理请求 如果你fetc ...

  3. 获取3个月前的时间(获取某一天的时间 NSDate) --NSCalendar--NSDateComponents

    -(void)getThreeMonthDate:(NSDate *)mydate { NSLog(@"%@",mydate); //1.创建NSCalendar NSCalend ...

  4. 2018-2019-2 20165320 《网络对抗技术》 Exp6 信息搜集与漏洞扫描

    2018-2019-2 20165320 <网络对抗技术> Exp6 信息搜集与漏洞扫描 一.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 二.实践内容 1.各种搜索技巧应用 ...

  5. [Groovy]static typing

    一般想到Groovy是JVM上的动态语言,都不知道它还有Static Typeing的功能 import groovy.transform.TypeChecked void someMethod() ...

  6. svg图转canvas，完全阔以的

    遇到的问题:页面中存在svg画的图,也存在canvas图,在用 html2canvas 截取页面的图就导致有图画缺失,至少我需要的缺失了. 一.如果页面单纯的存在一个svg画的图,转为canvas就很 ...

  7. slf4j + loback配置

    目前Java主流的log体系是 Slf4j +logback Spring boot 中配置log十分简单,常见的方式在application.yml文件中使用如下配置 logging: path: ...

  8. 免费的mysql数据库

    https://blog.csdn.net/kernel_/article/details/53320498

  9. 设置Linux shell超时自动退出

    Linux shell,一般默认情况下是不会超时退出的,但是有的时候我们想要让它在多少分钟后没有操作自动退出终端(听起来有点像windows多少分钟后自动锁屏一样).我们可以通过设置来实现这一功能. ...

  10. 6.过滤器（Filter）

    ---恢复内容开始--- 1.过滤器简介: 过滤器是一个用于拦截在数据源和数据目的地之间消息的一个对象. 过滤器 功能: 分析请求,将请求发送给指定的资源或自己创建一个响应返回:在请求到达服务器端前处 ...