第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 ...
随机推荐
- HDL代码风格建议（1）使用示例和IP
Recommended HDL Coding Styles HDL coding styles can have a significant effect on the quality of resu ...
- 【LG1393】动态逆序对
[LG1393]动态逆序对 题面 洛谷 题解 \(CDQ\)分治,按照时间来分治 应为一个删除不能对前面的操作贡献,所以考虑一个删除操作对它后面时间的操作的贡献 用上一个答案减去次贡献即可 代码 #i ...
- itop4412开发板添加开机启动程序
1. 先编写代码,以helloworld.c为例子 #include<stdio.h> #include<unistd.h> //这个文件是什么 main() { ; ) { ...
- Ruby 基础教程1-4
1.对象 数值对象 字符串对象 数组对象,散列对象 正则表达式对象 时间对象 文件对象 符号对象 2.类 Numeric String Array Hash Regexp File Symbol 3. ...
- Python Road
引子 雁离群兮不知所归,路遥远兮吾将何往 Python Road[第一篇]:Python简介 Python Road[第二篇]:Python基本数据类型 Python Road[第三篇]:Pyth ...
- 「日常训练」Bad Luck Island（Codeforces Round 301 Div.2 D）
题意与分析(CodeForces 540D) 是一道概率dp题. 不过我没把它当dp做... 我就是凭着概率的直觉写的,还好这题不算难. 这题的重点在于考虑概率:他们喜相逢的概率是多少?考虑超几何分布 ...
- List和Turple
List 格式:classmates = ['Michael', 'Bob', 'Tracy'] 读取list长度用:len(classmetes) 索引:索引正向从0开始,逆向从-1开始 在末尾增加 ...
- Python 默认参数值
Python 默认参数值,对于一些函数来说,你可能为希望使一些参数可选并使用默认的值,以避免用户不想为他们提供值的情况.默认参数值可以有效帮助解决这一情况.你可以通过在函数定义时附加一个赋值运算符(= ...
- fizzbuzz Python很有意思的解法
写一个程序,打印数字1到100,3的倍数打印“Fizz”来替换这个数,5的倍数打印“Buzz”,对于既是3的倍数又是5的倍数的数字打印“FizzBuzz” 题目不难,解起来容易,用for循环做if,e ...
- 【Random】-随机数字-jmeter
参数化 Random 参数化,存储结果的变量名,名字写了,就可以给其它请求使用