封装原生JS获取滚动条位置的方法

作者:木棉

时间:2026-10-22

浏览:417

本文介绍如何通过封装原生JavaScript对象获取页面滚动条的垂直和水平偏移量。代码重点处理了window.pageYOffset与document.documentElement/Body的兼容性问题,确保在不同DOCTYPE声明及浏览器环境下能准确返回滚动坐标。

文章目录

封装原生JS获取滚动条位置的方法

相关代码实现如下:


function Obj(){}
Obj.prototype={
  scroll:function(){
   /*
   主要是做兼容处理
   这里必须时!=null 因为默认值和每次滚动的时侯 都可以值为0
   但是 if(0)为假 所以就只要不为null 就执行
                               */
   if(window.pageYOffset!=null){
  /*IE9 和其他标准浏览器*/
  return {
    left:window.pageXOffset,
    top:window.pageYOffset
  }
  }
  /*声明了<!DOCTYPE html> */
 else if(document.compatMode=="CSS1Compat")
{
 return{
    left:document.documentElement.scrollLeft,
    top:document.documentElement.scrollTop
  } 
 }
else{
  return {
   left:document.body.scrollLeft,
   top:document.body.scrollTop
  }  
}
  }
}
var obj=new Obj();

归纳总结

上述内容即为封装scroll.js以获取滚动条数值的介绍,期望能带来帮助。若存在任何疑问,欢迎留言,小编将尽快回复。同时,衷心感谢各位对本站的支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章