码迷,mamicode.com
首页 > 其他好文 > 详细

文档的滚动条、标准怪异模式、视口尺寸

时间:2020-04-06 13:29:23      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:scroll   解决问题   适用于   距离   doctype   The   src   不兼容   scrolltop   

滚动条距离

  • window.pageXOffset | window.pageYOffset (IE8 集iE8 以下不兼容)

** 下面两组都是IE8 的解决方法 但是由于兼容性混乱 两种方法 俩组方法互斥,有一组方法有值的话另一组则为0 **

** 解决方法将两个值相加就可以解决问题 **

  • document.body.scrollLeft | document.body.scrollTop

  • document.documentElement.scrollTop | document.documentElement.scrollLeft

滚动条滚动

  • window.srcoll(x,y) | window.scrollTo(x,y) 用法相同 滚动到指定位置

  • window.srcollBy(x,y) 会在当前滚动位置相加 可以为负数

标准模式和混杂、怪异模式

  • html文档最上面的声明文档 (‘<!DOCTYPE html>‘)被删除掉就会启动怪异模式;

  • 怪异模式下浏览器将会摒弃最新语法,向后兼容

  • document.compatMode 两个取值可以判断标准还是怪异模式

    • CSS1Compat 标准模式
    • BackCompat 怪异模式

视口尺寸

  • window.innerWinth | window.innerHeight (IE8 及以下iE8 以下不兼容)

** 下面两组针对IE **

  • document.documentElement.clientWidth | document.documentElement.clientHeight (标准浏览器都兼容)

  • document.body.clientWidth | document.body.clientHeight (适用于怪异模式的浏览器)

文档的滚动条、标准怪异模式、视口尺寸

标签:scroll   解决问题   适用于   距离   doctype   The   src   不兼容   scrolltop   

原文地址:https://www.cnblogs.com/guyuedashu/p/12641591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!