从零开始的全栈工程师——js篇2.18（js的运动）

一、元素的 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） 会累加

原文地址：https://www.cnblogs.com/lijieqiqi/p/qiershiba.html

时间： 2024-08-03 01:53:50

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

从零开始的全栈工程师——html篇1.9（js开篇）

JS开篇 一.js介绍 全称 javascript 但不是java 他是一门前台语言 而java是后台语言js作者 布兰登·艾奇 前台语言:运行在客户端的后台语言:跟数据库有关的 能干什么?    页面特效 开发网页游戏 后台开发等等 二.js和ECMAscript的关系 es不是语言 是js的标准 我们学习js得按es的标准学习 三.前端的三个层次 HTML  结构层 CSS  表现层 JS  行为层 四.js写在哪里 因为js和pho都是脚本语言 js写在script这个标签里 php写在<

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

数据类型与全局属性 js的本质就是处理数据 数据来自于后台的数据库所以变量就起到一个临时存储数据的这作用ECMAscirpt 制定了js的数据类型 一.数据类型 1.基本数据类型 基本数据类型就是简单的赋值 Var s="hello"; var s=12; var s=true; var s=null; var s=undefined; 1)基本数据类型就是简单的赋值 字符串 string数字 number布尔 booleannull 空undefined 未定义 2)对象 objec

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

起名方式与CSS 一.起名方式(起名方式也叫选择器) 起名的目的是为了给标签添加属性 常见的3种选择器有 标签选择器   id选择器(使用的时候加#)    class选择器(使用的时候加.) 样式的要求是由选择器的权重来决定的 标签的权重为1  class的权重是10 id的权重是100 权重是可以叠加的. 比如 注意给一个标签起两个名字的时候千万不要这样起: 要在一个class或者id属性里面直接写两个名字的属性值 在两个名字之间加一个空格来区分两个名字: 之前咱们说了选择器有标签名 id

从零开始的全栈工程师——js篇2.15

元素的属性 Div.attributes 是所有标签属性构成的数据集合 Div.classList 是所有class名构成的数组集合 在classList的原型链上看以看到add()和remove() class的方法: div.className()方法 删除所有class名 替换一个或多个名字div.chassList.add()方法 往class里面添加一个名字div.classList.remove()方法 删除一个class名字 一.client 系列 clientWidth/clie

从零开始的全栈工程师——js篇2.19（BOM）

一.BOM 浏览器对象模型 1.window.open(url,ways) url 是打开的网页地址ways 打开的方式 _self 2.window.close() 关闭当前页面 3.window.navigator() .userAgent 浏览器用户信息 <--后期靠他解决浏览器的兼容性 4.window.location() 浏览器地址信息 5.window.history 返回上一页 window.history .back() 返回 widnow.history.forward()前

从零开始的全栈工程师——js篇（作用域 this 原型笔试题练习）

作用域 // 1. fn() function fn () { console.log(12) } var as = function () { console.log(45) } // 2. var a = 12; function fn () { console.log(a) var a = 45; console.log(a) } fn() //3. var a = 12; function fn () { console.log(a) a = 45; console.log(a) } f

“全栈”工程师 请不要随意去做

今天我来给大家说说 "全栈工程师" 的事儿. 写这篇文的背景原因: 很简单就是最近越来越多的人想做[全栈工程师],他们的目标就是全栈,他们才入行短短1-2年,甚至刚从培训班出来:我的目标是做全栈,我啥都要学会,啥都会写,这样我就是大牛了,可以挣大钱,就算创业,我也不用招那么多人,一个人搞定一个产品,融资上市 ,CEO白富美,balabala... 我给他的回复是: 去你xx的,你连JS 数组和对象用法都搞不清,抄几个效果,看几个视频教程摸索摸索就要做万能人了? "全栈&quo

读&lt;专栏&#183;谈谈全栈工程师&gt;

原文地址:http://leihuang.org/2014/12/12/read-Full-Stack-Developer/ 昨天晚上看海贼王给看睡着了(11点的左右),导致早上5点就醒了,怎么办呢,找点东西打发点时间,本来想看看知乎的,但是最近对知乎的氛围很失望,总感觉好浮躁的氛围,当然这些跟我关注的人有关系,改天清理清理. 犹豫了半天,想着还是看本薄点的书吧,下了个豆瓣阅读软件,因为以前没用过,本来想找书,结果点进了豆瓣专栏,还以为里面是书.进去之后才发现是别人写的专栏.也没想太多,看到有科

为什么未来是全栈工程师的世界？

谨以此文献给每一个为成为优秀全栈工程师奋斗的人. 节选自<Growth: 全栈增长工程师指南> 技术在过去的几十年里进步很快,也将在未来的几十年里发展得更快.今天技术的门槛下降得越来越快,原本需要一个团队做出来的Web应用,现在只需要一两个人就可以了. 同时,由于公司组织结构的变迁,以及到变化的适应度,也决定了赋予每个人的职责将会越来越多.尽管我们看到工厂化生产带来的优势,但是我们也看到了精益思想带来的变革.正是这种变革让越来越多的专家走向全栈,让组织内部有更好的交流. 你还将看到专家和全栈的