孙肖宁

javascript中的Scroll家族
ScrollWidth和scrollHeight(不包括border)检测盒子的宽高。(调用者:节点元素。属性。)...
扫描右侧二维码阅读全文
13
2018/04

javascript中的Scroll家族

ScrollWidth和scrollHeight(不包括border)

检测盒子的宽高。(调用者:节点元素。属性。)
盒子内容的宽高。(如果有内容超出了,显示内容的高度)
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小

scrollTop和scrollLeft

网页,被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。

兼容性问题

  • 未声明 DTD(谷歌只支持)
    document.body.scrollTop
  • 已经声明DTD(IE678只认识他)
    document.documentElement.scrollTop
  • 火狐/谷歌/ie9+以上支持的
    window.pageYOffset

兼容写法:

var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
或者
var aaa = document.documentElement.scrollTop + document.body.scrollTop;

获取title、body、head、html标签

  • document.title 文档标题;
  • document.head 文档的头标签
  • document.body文档的body标签;
  • document.documentElement 它表示文档的html标签, 也就是说,基本结构当中的html标签并不是通过document.html 去访问的,而是document.documentElement 。

scroll()的封装

方式一:

        function scroll(){

            return {
                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
               "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
            }
        }

方式二

        function scroll(){
            if(window.pageYOffset !== undefined){
                return {
                    "top": window.pageYOffset,
                    "left": window.pageXOffset
                };
            }else if(document.compatMode === "CSS1Compat"){
                return {
                    "top": document.documentElement.scrollTop,
                    "left": document.documentElement.scrollLeft
                };
            }else{
                return {
                    "top": document.body.scrollTop,
                    "left": document.body.scrollLeft
                };
            }

        }
Last modification:April 14th, 2018 at 11:01 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment