一、元素的 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. phaser小游戏框架学习中的屏幕适配

    这篇博客主要讲一下上一篇博客的右侧和底部出现的问题.就是页面会有偏移量.说一下这个产生的原因吧. 一开始在构建html页面的时候,习惯性的在页面中加了 <meta name="view ...

  2. 剑指offer —— 从尾到头打印链表

    1.问题:输入一个链表,从尾到头打印链表每个节点的值. /** * public class ListNode { * int val; * ListNode next = null; * * Lis ...

  3. partial、struct、interface与C#和CLR的关系

    partial.struct.interface是C#编译器特有的,CLR对此一无所知.

  4. 关于form组件的补充-------formChoice

    form组件的Choice字段 还是基于出版社和书的模型来详解 models.py(模型) from django.db import models # Create your models here ...

  5. java从笨鸟到菜鸟

    链接别人的笔记 http://www.cnblogs.com/cugwx/p/3536840.html

  6. 问题：git处理中文名称时候显示为编码形式（已解决）

    问题描述: Untracked files: (use "git add <file>..." to include in what will be committed ...

  7. thinkPHP 模板操作

    1.assign赋值 $this->assign('title','模板操作'); $this->assign('bests',$bests);//$bests是二维数组 2.变量的输出 ...

  8. redis的三种启动方式,个人常用第二种

    redis的启动方式1.直接启动  进入redis根目录,执行命令:  #加上‘&’号使redis以后台程序方式运行 1 ./redis-server & 2.通过指定配置文件启动  ...

  9. 安装 Office project 2013 时提示找不到 Office.zh-cn\OfficeLR.cab

    昨天在安装project 时总是弹出下图中的提示框,在网上搜索了很多办法但是没有解决这个问题. 后来进入到office.zh-cn的文件夹中,在officemui.msi文件中右键卸载,然后在重新安装 ...

  10. Nginx的验证、启动、停止、重启

    验证 验证nginx配置文件是否正确,进入sbin目录,输入以下命令: ./nginx -t  启动 进入sbin目录,输入以下命令: ./nginx -c /home/mppay/nginx/con ...