版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
scroll相关属性window.onscroll()方法方法。效果如下：（注意看控制台的打印结果）如果你需要做滚动监听，可以使用这个方法。我们来看看和scroll相关的有哪些属性。1、ScrollWidth和scrollHeightScrollWidth和scrollHeight：获取元素整个滚动区域widthpadding，不包括和。ScrollWidth注意：scrollHeight的特点是：如果内容超出了盒子，scrollHeight为内容的高（包括超出的内容）；scrollHeightScrollWidth同理。scrollHeight<!DOCTYPEhtml><!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{width:100px;height:100px;padding:10px;margin:3px;border:8pxsolidred;}</style></head><body><divclass="box">静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。静，能寒窗苦守；动，能点石成金。</div><script>vardiv=document.getElementsByTagName("div")[0];//`scrollHeight`的特点是：如果内容超出了盒子，`scrollHeight`为内容的高（包括超出的内容）；如果不超出，`scrollHeight`为盒子本身的高度。//IE8以下（不包括IE8），为盒子本身内容的高度。console.log(div.scrollWidth);console.log(div.scrollHeight);</script></body></html>打印结果：2、scrollTop和scrollLeftscrollLeft：获取水平滚动条滚动的距离。scrollTop：获取垂直滚动条滚动的距离。实战经验：当某个元素满足scrollHeight-scrollTopclientHeight时，说明垂直滚动条滚动到底了。当某个元素满足scrollWidth-scrollLeftclientWidth时，说明水平滚动条滚动到底了。户能够看完“长长的活动规则”，才允许触发接下来的表单操作。scrollTop的兼容性如果要获取页面滚动的距离，scrollTop这个属性的写法要注意兼容性，如下。声明，写法为：documentdocument.body.scrollTop在没有DTD声明的情况下，要求是这种写法，chrome浏览器才能认出来。声明，写法为：documentdocument.documentElement.scrollTopdocument.body.scrollTop||document.document.body.scrollTop||document.documentElement.scrollTop//方式一document.body.scrollTopdocument.documentElement.scrollTop //方式二另外还有一种兼容性的写法：window.pageYOffset和window.pageXOffset。这种写法无视DTD的声明。这种写法支持的浏览器版本是：火狐/谷歌/ie9+。综合上面的几种写法，为了兼容，不管有没有DTD，最终版的兼容性写法：windowwindow.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop;判断是否已经DTD声明方法如下：patMode"CSS1Compat" //已声明patMode"BackCompat" //未声明将scrollTop和scrollLeft进行封装这里，我们将和封装为一个方法，名叫scroll()，返回值为一个对象。以后就直接调用scroll().top和scroll().left就好。代码实现：<html><html><headlang="en"><metacharset="UTF-8"><title></title><style>body{heightheight:6000px;width:5000px;}</style></head><body><script>//需求：封装一个兼容的scroll().返回的是对象，用scroll().top获取scrollTop，用scroll().left获取scrollLeftwindow.onscroll=function(){// varmyScroll=scroll();// myScroll.top;console.log(scroll().top);console.log(scroll().left);}//函数封装（简单封装，实际工作使用）functionscroll(){return{//此函数的返回值是对象left:window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop,right:window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft}}</script></body></html>functionscrollfunctionscroll(){ //开始封装自己的scrollTopif(window.pageYOffset!==undefined){ //ie9+高版本浏览//因为window.pageYOffset默认的是 0 所以这里需要判断return{left:window.pageXOffset,top:window.pageYOffset}}elseif(patMode==="CSS1Compat"){ //标准浏览器 来判断有没声明DTDreturn{left:document.documentElement.scrollLeft,top:document.documentElement.scrollTop}}return{ //未声明DTDleft:document.body.scrollLeft,top:document.body.scrollTop}}获取html文档的方法获取title、body、head、html标签的方法如下：document.titledocument.head文档标题；文档的头标签document.titledocument.headdocument.body文档的body标签；document.bodydocument.documentElement（这个很重要）。document.documentElementdocument.documentElement表示文档的htmlhtml而是通过document.documentElementdocument.html去访问的。scrollTop举例：固定导航栏完整版代码实现：index.html：<!DOCTYPEhtml><!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>*{margin:0;padding:0}img{vertical-align:top;}.main{margin:0auto;width:1000px;margin-top:10px;}#Q-nav1{overflow:hidden;}.fixed{position:fixed;top:0;left:0;}</style><!--引入工具js--><scriptsrc="tools.js"></script><script>window.onload=function(){//需求1：当我们滚动界面的时候，被卷曲的头部如果超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed//需求2：当我们滚动界面的时候，被卷曲的头部如果小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed//1.老三步。vartopDiv=document.getElementById("top");varheight=topDiv.offsetHeight;varmiddle=document.getElementById("Q-nav1");varmain=document.getElementById("main");window.onscroll=function(){//2.判断，被卷曲的头部的大小if(scroll().top>height){//3.满足条件添加类，否则删除类middle.className+=fixed";//第二个盒子也要占位置，为了避免重叠，我们给第三个盒子一个上padding的空间，把这个空间留给第二个盒子main.style.paddingTop=middle.offsetHeight+"px";}else{middle.className="";//清零main.style.paddingTop0;}}}</script></head><body><divclass="top"id="top"><imgsrc="images/top.png"alt=""/></div><divid="Q-nav1"><imgsrc="images/nav.png"alt=""/></div><divclass="main"id="main"><imgsrc="images/main.png"alt=""/></div></body></html>上方代码中，有一个技巧：mainmain.style.paddingTop=middle.offsetHeight+"px";仔细看注释就好。tools.js：/**/***Createdbysmyhvaeon2018/02/03.*/functionscroll //开始封装自己的scrollTopif(window.pageYOffsetundefined //ie9高版本浏览器//因为window.pageYOffset默认的是 0 所以这里需要判断returnreturn{left:window.pageXOffset,top:window.pageYOffset}}elseif(patMode==="CSS1Compat"){ //标准浏览器 来判断有没声明DTDreturn{left:document.documentElement.scrollLeft,top:document.documentElement.scrollTop}}return{ //未声明DTDleft:document.body.scrollLeft,top:document.body.scrollTop}}实现效果：工程文件：2018-02-03-scrollTop固定导航栏.rar缓动动画三个函数缓慢动画里，我们要用到三个函数，这里先列出来：Math.ceil() 向上取整Math.floor() 向下取Math.round();四舍五入缓动动画的原理缓动动画的原理就是：在移动的过程中，步长越来越小。设置步长为：目标位置和盒子当前位置的十分之一。用公式表达，即：盒子位置盒子位置=盒子本身位置+(目标位置-盒子本身位置)/10；代码举例：<!DOCTYPEhtml><!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{width:100px;height:100px;background-color:pink;position:absolute;}</style></head><body><button>运动到left=400px</button><div></div><script>varbtn=document.getElementsByTagName("button")[0];vardiv=document.getElementsByTagName("div")[0];btn.onclick=function(){setInterval(function()//动画原理：盒子未来的位置=盒子当前的位置+步长div.style.left=div.offsetLeft+(400-div.offsetLeft)/10+"px";},30);}</script></body></html>效果：缓慢动画的封装（解决四舍五入的问题）我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了：原因是：JS在取整的运算时，进行了四舍五入。我们把打印396.04px这个left值打印出来看看：我么发现，通过div.style.left获取的值是精确的，通过div.offsetLeft获取的left值会进行四舍五入。此时，我们就要用到取整的函数了。通过对缓动动画进行封装，完整版的代码实现如下：<!DOCTYPEhtml><!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>div{width:100px;height:100px;background-color:pink;position:absolute;left:0;}</style></head><body>200</button>400</button><div></div><script>varbtn=document.getElementsByTagName("button");vardiv=document.getElementsByTagName("div")[0];btn[0].onclick=function(){animate(div,200);}btn[1].onclick=function(){animate(div,400);}//缓动动画封装functionanimate(ele,target){////要用定时器，先清定时器//一个萝卜一个坑儿，一个元素对应一个定时器clearInterval(ele.timer);//定义定时器ele.timer=setInterval(function(){//获取步长//步长应该是越来越小的，缓动的算法。varstep=(target-ele.offsetLeft)/10;//对步长进行二次加工(大于0向上取整,小于0向下取整)//达到的效果是：最后10像素的时候都是1像素1像素的向目标位置移动，就能够到达指定位置。step=step>0?Math.ceil(step):Math.floor(step);//动画原理：目标位置当前位置步长ele.style.leftele.offsetLeftstep"px";console.log(step);//检测缓动动画有没有停止console.log("smyhvae");if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){//处理小数赋值ele.style.left=target+"px";clearInterval(ele.timer);}},30);}</script></body></html>实现效果：window.scrollTo()方法举例：返回到顶部小火箭index.html：<!DOCTYPEhtml><!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>img{position:fixed;bottom:100px;right:50px;cursor:pointer;display:none;border:1pxsolid#000;}div{width:1210px;margin:100pxauto;text-align:center;font:50026px/35px"simsun";color:red;}</style><scriptsrc="tools.js"></script><script>window.onload=function(){//需求：被卷去的头部超过100显示小火箭，然后点击小火箭屏幕缓慢移动到最顶端。//难点：我们以前是移动盒子，现在是移动屏幕，我们没有学过如何移动屏幕。// 技术点：window.scrollTo(x,y);浏览器显示区域跳转到指定的坐标//步骤：//1.老三步varimg=document.getElementsByTagName("img")[0];window.onscroll=function(){//被卷去的距离大于200显示小火箭，否则隐藏//2.显示隐藏小火箭if(scroll().top>1000){img.style.display="block";}else{img.style.display="none";}//每次移动滚动条的时候都给leader赋值，模拟leader获取距离顶部的距离leader=scroll().top;}//3.缓动跳转到页面最顶端（利用我们的缓动动画）vartimer=null;vartarget=0;//目标位置varleader=0;//显示区域自身的位置img.onclick=function(){//技术点：window.scrollTo(0,0);//要用定时器，先清定时器clearInterval(timer);timer=setInterval(function(){//获取步长varstep=(target-leader)/10;//二次处理步长step=step>0?Math.ceil(step):Math.floor(step);leader=leader+step;//往上移动的过程中，step是负数。当前位置减去步长，就等于下一步的位置。//显示区域移动window.scrollTo(0leader);//清除定时器if(leader===0){clearInterval(timer);}},25);}}</script></head><body><imgsrc="images/Top.jpg"/><div>我是最顶端 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永不止步 <br>生命壹号，永
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- T/CAAMTB 114-2023甲醇燃料增程器可靠性及耐久性试验与评定方法
- DB31/T 1669.2-2026城域物联感知基础设施 第2部分:管理要求
- T/BBA 04-2025超低能耗建筑用防火门
- 急性左心衰的急救护理
- 《俄国十月革命的胜利》课件
- GB-T 1220-2020 中文版（不锈钢棒 不锈钢棒材产品核心标准）
- 自杀风险因素评估量表
- 《班级管理》形考任务及参考答案
- (2025)《公共基础知识》试真题库及答案
- 糖尿病患者的营养支持护理
- 2026年陕西英语单招模拟试题及答案详解
- DBJ50-T-157-2022房屋建筑和市政基础设施工程施工现场从业人员配备标准
- 小学体育活动中劳动教育的实践案例分析
- 《第14课 绿色上网-遵守网络文明公约》课件
- 义务教育小学数学课程标准(2020年版)
- 商务星球版七年级地理上册 （地球的自转） 教学课件
- DNA甲基化检测方法教学课件
- 安全员B证(项目负责人)题库
- 美发洗护(课堂)课件
- 中考语文专题修辞手法整理课件
- 人手及物体初始菌检验方法的验证21
评论
0/150
提交评论