DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸

查看滚动条的距离

方法版本
window.pageXOffset / pageYOffsetIE9/IE8及以下不支持(常规)
document.body.scrollLeft/scrollTopIE9/IE8及以下(部分支持,具体看模式)
document.documentElement.scrollLeft/scrollTopIE9/IE8及以下(部分支持,具体看模式)
window.scrollX / scrollY不常见

在这里插入图片描述

  • 滚动条距离:也看页面真实移动了多少,不要看物理距离
    在这里插入图片描述

兼容模式

在这里插入图片描述

浏览器的怪异模式和标准模式

  • 意味着需要按照W3C规范
  • CSS1Compat - W3C的兼容模式:标准模式
    在这里插入图片描述
<!DOCTYPE html> 
  • 若删除<!DOCTYPE html> 则为BackCompat - 怪异模式
    在这里插入图片描述

浏览器的可视区域

方法模式
window.innerWidth / innerHeightIE9/IE8及以下不支持(常规)【包括滚动条】
document.documentElement.clientWidth / clientHeightIE9/IE8及以下 - 标准 【不包括滚动条】
document.body.clientWidth / clientHeightIE9/IE8及以下 - 怪异 【包括滚动条】

在这里插入图片描述

  • outerWidth / outerHeight (包含了滚动条、侧边栏、控制台等)

文档尺寸

  • scrollWidth = window.innerWidth + window.pageXOffset 是真正html文档的宽高
方法模式
document.documentElement.scrollWidth /scrollHeightIE9/IE8及以下 - 标准 【不包括滚动条】
document.body.scrollWidth / scrollHeightIE9/IE8及以下 - 怪异 【包括滚动条】

在这里插入图片描述

div.getBoundingClientRect()

  • 在IE中不返回宽高,可以用bottom-top计算
  • 不实时计算
    在这里插入图片描述
    在这里插入图片描述

offsetLeft

  • 只认父级的定位元素,没有则向上找到可视区域的边框
    在这里插入图片描述
  • margin塌陷
    在这里插入图片描述
  • 解决1,父元素加上边距在这里插入图片描述
  • 解决2,BFC 但是offsetLeft仍然是100
    在这里插入图片描述
    在这里插入图片描述

offsetParent

  • 找有定位的父级
  • 没有则找到body
    在这里插入图片描述
    在这里插入图片描述

封装方法

  • 小盒子(左上角)距离文档左上角的坐标
  • document.body.offsetLeft 0
    在这里插入图片描述

操作滚动条

  • 要滚动到window.scroll(x,y) / window.scrollTo(x,y)
  • 每一次滚动多少window.scrollBy(x,y) 应用:计时器+每次滚动(自动滚动)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DOM-6 【兼容】读写样式属性、操作伪元素、运动元素初探

规范 <style type"text/css"></style><script type"text/javascript"></script>读写样式属性 .style是访问不到css样式表的&#xff0c;只能访问到行内/内联的属性&#xff0c;当未设置行内属性时&#xff0c;结果为空字符串 设…

RGBD论文阅读笔记

Single-Image Depth Perception in the Wild 简要记载一下对于利用RGB图像depth图像得到segmentation的论文。 论文名称&#xff1a;Cascaded Feature Network for Semantic Segmentation of RGB-D Images 论文出处 ICCV 2017 Lin 模型结构 数据集 NYUDv2 SUN-RGBD 性能分析 总…

vue组件调用(全局调用和局部调用)

当用vue-cli创建一个项目后, 创建项目的方法: https://www.cnblogs.com/fps2tao/p/9376847.html 编写了组件怎么,在其他组件中调用了? 组件listBox: 路径 src/components/listBox.vue <template><div class"listBox">listBox222</div> </templ…

DOM-7 【兼容】事件处理函数、冒泡捕获、阻止冒泡默认事件

事件处理函数 绑定事件 绑定事件的处理函数&#xff08;事件本身是存在的&#xff0c;绑定的是相应的反馈&#xff09;事件 事件的反馈 前端交互 &#xff08;前端核心&#xff09; 绑定事件的方式 1. 句柄绑定 默认&#xff08;只能&#xff09;是事件冒泡这种事件流为…

DOM-8 【兼容】冒泡捕获流、事件与事件源对象、事件委托

事件流 1. 含义 描述从页面中接收事件的顺序 2. 分类 IE提出的 事件冒泡流 Event BubblingNetscape提出的 事件捕获流 Event Capturing 3. 阶段 事件捕获阶段 处于目标阶段 事件冒泡阶段 事件捕获先于事件冒泡执行 dom dom0&#xff1a;定义句柄方式&#xff0c;兼…

IIS6.0,Apache低版本,PHP CGI 解析漏洞

IIS6.0解析漏洞 在IIS6.0下存在这样的文件“名字.asp;名字.jpg” 代表了jpg文件可以以asp脚本类型的文件执行。 根据这个解析漏洞我们可以上传这种名字类型的图片&#xff0c;比如 1.asp;xxx.jpg 他会忽略;后边的内容&#xff0c;所以文件相当于1.asp asp一句话木马 <%eval …

UVA 3485 Bridge

题目大意 你的任务是修建一座大桥。桥上等距地摆放着若干个塔&#xff0c;塔高为H&#xff0c;宽度忽略不计。相邻两座塔之间的距离不能超过D。塔之间的绳索形成全等的对称抛物线。桥长度为B&#xff0c;绳索总长为L&#xff0c;如下图所示求建最少的塔时绳索的最下端离地的高度…

ES5-拓展 this指向的总结

每个函数在执行时都有自己的this指向 1. 默认绑定规则&#xff1a; 全局中&#xff0c;this指向window this window函数的独立调用&#xff0c;this默认指向window &#xff08;不要把独立调用理解成window调用&#xff09; // 函数在全局中调用&#xff0c;也就是被window调…

国内初创企业选择云计算服务器价格对比

假设我们是一家初创企业&#xff0c;现在要选择第一台服务器。业务还未确定&#xff0c;只知道是互联网业务 要求&#xff1a; 至少2核&#xff0c;否则多线程的软件都跑不了至少4G内存&#xff0c;这样可以运行数据库或者elasticsearch这种比较吃内存的东西。或者说&#xff0…

ES5-拓展 箭头函数的this、this的优先级

让内部函数的this指向和父函数的this&#xff0c;可以显示改变this指向&#xff0c;也可以使用箭头函数 箭头代替了function关键字 箭头函数内部没有this指向&#xff0c;箭头函数的this是稳定引用父作用域的。因为它的存在就是要稳定this指向。 适用于普通函数的所有绑定规则…

java 实现压缩单个文件

先来实现一个简单的单文件压缩&#xff0c;主要是为了解一下压缩需要使用到的流。。 效果&#xff1a; 说明&#xff1a;压缩实现使用ZipOutputStream 代码&#xff1a; package com.gx.compress;import java.io.BufferedInputStream; import java.io.BufferedOutputStream; im…

jekins构建触发器详解

jenkins版本&#xff1a;2.89.2 1、触发远程构建 (例如,使用脚本)&#xff1a;通过一个网址的访问来触发构建&#xff0c;这样就不需要登录jenkins系统也能触发构建了。 示例地址&#xff1a; http://localhost:8848/job/FlashRegistration/build??token口令&cause书写构…

ES5-拓展 隐式数据类型转换

Boolean转换原则&#xff1a;非假即真 6种虚值 原始值转换为原始值 对象转换为原始值 Date()和new Date() new Date可以不写括号(new方式返回的一定是对象)&#xff0c;返回Date对象Date()返回函数执行&#xff0c;返回时间字符串 引用值转原始值 先找valueOf方法(一般…

Swagger的简单入门【转载】

一、Swagger简介 上一篇文章中我们介绍了Spring Boot对Restful的支持&#xff0c;这篇文章我们继续讨论这个话题&#xff0c;不过&#xff0c;我们这里不再讨论Restful API如何实现&#xff0c;而是讨论Restful API文档的维护问题。 在日常的工作中&#xff0c;我们往往需要给前…

visual studio code搭建本地服务器(node.js+express)

一、安装node.js&#xff08;常规软件安装流程&#xff0c;比较简单&#xff0c;不用赘述&#xff09; 二、安装express框架 1. 打开Windows命令提示符&#xff0c;输入&#xff1a; npm install express -g&#xff0c;等待&#xff0c;安装好如下所示&#xff1a; npm instal…

chrome调试

技术拓展直播课8 按chrome的官方文档 长按刷新 清除缓存&#xff08;不一定好使&#xff09; Ctrl f 查找类 console控制台见b站 bilibili source面板直接打断点 效果和debugger一样 单步调试 进入到函数的下一步 网速 no throttling 是否需要过滤 domcontentloaded d…

61-1 认识webpack

认识webpack 面向过程开发的不便引入外部js执行顺序面向对象开发 加载多个文件耗时更多 增加了http请求 引入过多js变量来源不明 优化 使用前先import 但使用import语法需要借助工具webpack翻译为浏览器可以解析的语法安装node自动携带npmwebpack若没有全局安装 需要使用npx…

css font简写

一、字体属性主要包括下面几个 font-family&#xff0c;font-style&#xff0c;font-variant&#xff0c;font-weight&#xff0c;font-size&#xff0c;fontfont-family&#xff08;字体族&#xff09;: “Arial”、“Times New Roman”、“宋体”、“黑体”等;font-style&…

javascript --- 原生的拖拽功能实现

准备一个方块: <style>.drag{background-color:#aaf;position:absolute;} </style> <div class"drag" style"width:100px;height:100px;top:0;left:0"></div>监听鼠标的按住事件: let dragDiv document.getElementsByClassName…

web安全学习-验证机制存在的问题

验证机制是应用程序防御恶意攻击的中心机制。它处于防御未授权的最前沿&#xff0c;如果用户能够突破那些防御&#xff0c;他们通常能够控制应用程序的全部功能&#xff0c;自由访问其中的数据。缺乏安全稳定的验证机制&#xff0c;其他核心安全机制&#xff08;如回话管理和访…