第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 ...
随机推荐
- linux普通用户su root切换提示没有文件或目录
1. 首先进入单用户模式: 1). ubuntu : 上述情况可以在grub界面选择第二项修复,但没有grub可以参考: 1.重启ubuntu,随即长按shirft进入grub菜单: 2.选择reco ...
- 成都Uber优步司机奖励政策（4月9日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- LimitedConcurrencyLevelTaskScheduler
//-------------------------------------------------------------------------- // // Copyright (c) Mic ...
- Python3 linux安装
./configure --prefix=/usr/local/python3 --with-ssl --enable-optimizations make && make insta ...
- Weka java.lang.reflect.InvocationTargetException
在用Weka导入数据的时候报 java.lang.reflect.InvocationTargetException 错误,Weka运行包没有给出详细的错误信息,无法查到. 直接调试Weka源码,发现 ...
- react-native android 初始化问题
最近开始接触rn,官方起手,装了一堆工具,然后启动项目的时候出现了一堆问题,这里针对我遇到的一些问题提供一些解决方案. 本人开发环境mac,在启动ios的时候没啥大问题,可以直接启动,这里提示一点,因 ...
- HDU - 6444（单调队列+思维）
链接:HDU - 6444 题意:给出一个包含 n 个数的环,每个数都有一个价值,起点任选,每次跳顺时针跳 k 个数,在哪个数就能获得该价值(包括起点),最多取 m 次,问最少需要补充多少价值,所拿的 ...
- bson文件的切分
描述 最近遇到问题需要将较大的bson文件(MongoDB导出的二进制json文件)按文档(记录)进行切分,网上这方面的资料实在太少,弄了一天多终于达到了基本要求(还不知道有没有BUG) 代码 pac ...
- Python-3.6 安装pycrypto 2.6
最近接触公司后台管理系统的开发,其中涉及到加密模块pycrypto. 重点来了!!!!敲黑板!!!! pycrypto在PyCharm中跟其他的模块不一样,pip install pycrypto安装 ...
- JavaScript筑基篇(一)->变量、值与对象
说明 JavaScript中变量.值.对象的理解.本文为了简化理解,前半部分暂时刨除与执行上下文的相关概念.另外本文是个人的见解,如有疑问或不正支持,欢迎提出指正和讨论! 目录 前言 参考来源 变量与 ...