第49天：封装自己的scrollTop
一、scroll家族
offset 自己的偏移
scroll滚动的
scrollTop和scrollLeft
scrollTop 被卷去的头部
当滑动滚轮浏览网页的时候，网页隐藏在屏幕上方的距离
二、页面滚动效果事件
window.onscroll=function(){页面滚动语句}
三、获取scrollTop
谷歌和没有声明DTD<DOCTYPE>：document.body.scrollTop
火狐和其他浏览器：document.documentElement.scrollTop
IE9+和最新浏览器:window.pageXOffset; pageYOffset(scrollTop)
兼容性写法：
var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
四、json对象表示
var json={key:value,key1:value}
使用方法
var json={name："李白"，age：58};
json名.属性 json.name 李白
五、判断是否声明DTD
document.compatMode==="BackCompat"
BackCompat 未声明
CSS1Compat 已经声明
注意大小写
六、封装scrollTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装自己的scrollTop</title>
<style>
body{
height: 3000px;
}
</style>
</head>
<body> </body>
</html>
<script>
//var json={left:10,right:10};
//json.left
function scroll(){
if(window.pageYOffset!=null){//IE9+和其他浏览器
return{
left:window.pageXOffset,
top:window.pageYOffset
}
}else if(document.compatMode=="CSS1Compat"){//判断是否声明DTD
return{//声明的
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}
return{//未声明的
left:document.body.scrollLeft,
top:document.body.scrollTop
}
} window.onscroll=function(){
console.log(scroll().top);
}
</script>
第49天：封装自己的scrollTop的更多相关文章
- js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装
1. offsetParent 获取的最近的定位的父元素 offsetLeft/offsetTop 是相对于offsetParent的距离 offsetHeight/offsetWidth 获 ...
- clientTop,scrollTop，兼容
在开发中常见的额兼容性问题: scrollTop问题: function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset != null) { ...
- JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...
- 【前端】javascript实现鼠标跟随特效
实现效果: 实现代码: <!DOCTYPE html> <html> <head> <title>鼠标跟随</title> <meta ...
- 【前端】纯html+css+javascript实现楼层跳跃式的页面布局
实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title&g ...
- javaScript动画3 事件对象event onmousemove
事件对象的获取(event的获取) var event = event || window.event;(主要用这种) screenX.pageX和clientX的区别 PageY/pageX: 鼠标 ...
- javaScript动画2 scroll家族
offsetWidth和offsetHight (检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上.获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和 ...
- JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...
- JavaScript初探系列（十）——Event
一.绑定事件的两种方式 (一).方式一:onclick 举例: <body> <button>点我</button> <script> var btn ...
随机推荐
- 模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈
自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...
- 二进制描述子 BRIEF(ORB), BRISK, FREAK
二进制描述子设计原则体现在三个部分: 采样pattern 方向orientation compensation 配对sampling pairs ORB基于BRIEF: BRISK是用于OKVIS的描 ...
- typescript语法
先来讲一讲TypeScript出现的背景 前端javascript的编程思想与后端java面向对象的编程思想有很大的不同,微软公司借鉴了coffeescript语言,继承了很多C#和java的编程思想 ...
- 一个只有十行的精简MVVM框架
本文来自网易云社区. 前言 MVVM模式相信做前端的人都不陌生,去网上搜MVVM,会出现一大堆关于MVVM模式的博文,但是这些博文大多都只是用图片和文字来进行抽象的概念讲解,对于刚接触MVVM模式的新 ...
- 「日常训练」Kefa and Company（Codeforces Round #321 Div. 2 B）
题意与分析(CodeForces 580B) \(n\)个人,告诉你\(n\)个人的工资,每个人还有一个权值.现在从这n个人中选出m个人,使得他们的权值之和最大,但是对于选中的人而言,其他被选中的人的 ...
- 结合BeautifulSoup和hackhttp的爬虫实例
网页页数的改变 headers头不添加
- Appium-原理、设置
Appium是支持跨平台的移动端自动化测试框架. 下面介绍下Appium的具体工作流程: 首先,Appium server 默认监听4723端口,监听客户端的命令. 客户端指的是 我们编写的自动化测试 ...
- linux命令（实用！）
本文转载自网络 1.1 shell家族 shell:命令解释器,根据输入的命令执行相应命令. 察看当前系统下有哪些shell: cat /etc/shells 察看当前系统正在使用的shell ech ...
- JDK源码分析：Byte.java
Byte是基本数据类型byte的包装类. 1)声明部分: public final class Byte extends Number implements Comparable<Byte> ...
- python常用命令—windows终端查看安装包信息
1, pip list 会将 Python 的所有安装包全部显示出来, 左边是包名, 右边是包的版本号. 2, pip show 包的名字 会将这个包的名字,版本号,包的功能说明,按装这个包的路径显示 ...