js获得滚动条位置是否存在距离某一侧像素值(转)

最新推荐文章于 2023-07-13 12:10:23 发布

原创最新推荐文章于 2023-07-13 12:10:23 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #浏览器 #CSS #HTML #ViewUI

ajax 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用JavaScript判断DOM对象是否出现滚动条。利用offsetTop、offsetLeft、offsetHeight及scrollHeight等属性，通过简单条件判断实现。同时提供获取滚动条位置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript中如何判断dom对象是否出现了滚动条
　　某些场景下需要用javascript去获取页面中的某个dom对象是否出现了滚动条，
　　那么javascript的dom操作为我们提供了哪些方法可以得到呢？
　　参考DHTML手册会发现：
　　dom对象有offsetTop和 offsetLeft属性，
　　它们所获得的值是当前滚动条所滚动的数值；
　　当滚动条没有滚动或者没有出现的时候，
　　这两个值都是0。
　　dom对象还有属性：offsetHeight和 scrollHeight，
　　offsetHeight是dom对象相对父级元素的可见高度，
　　scrollHeight 是dom对象包含了滚动部分的高度。
　　有了上述的四个基本属性，
　　那么我们可以尝试进行判断（当然以下的判断是在没有设置css样式：overflow:hidden的情况下的）：
　　当dom对象offsetTop > 0的时候，说明滚动条已经存在了；
　　另外，如果scrollHeight > offsetHeight即包含滚动部分的高度超出可视高度的时候，
　　滚动条即已出现。
　　综合上述两条可以得出以下结论：
　　if (dom.offsetTop > 0 || dom.scrollHeight > dom.offsetHeight) {
　　//滚动条已出现
　　}
　　当然，
　　是不是只有这两个条件可以判断滚动条是否存在呢？
　　如有朋友有更好的方法，可点击本文后面的“我要留言”给我留言，
　　感谢赐教～

js获得滚动条位置

注意body的使用

function getScroll()

{

var t, l, w, h;

if (document.documentElement && document.documentElement.scrollTop) {

t = document.documentElement.scrollTop;

l = document.documentElement.scrollLeft;

w = document.documentElement.scrollWidth;

h = document.documentElement.scrollHeight;

} else if (document.body) {

t = document.body.scrollTop;

l = document.body.scrollLeft;

w = document.body.scrollWidth;

h = document.body.scrollHeight;

}

return { t: t, l: l, w: w, h: h };

}

获取浏览器垂直滚动条向下滚动的像素
　　关于js中 document.body.scrollTop 不能返回正确值的原因收藏
　　本来是为了通过 document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素，但是不管滚动条在什么位置总是返回是0，造成这样的原因和html的头部声明有关，如果头部声明为：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，这样肯定得到的结果是 0，如果该为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">就能得到正确的结果，对于第一种头部声明想要得滚动条的滚动的高度怎么办，解决方法有两种
　　1、var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { scrollPos = document.body.scrollTop; }
　　2、用document.documentElement.scrollTop 替代 document.body.scrollTop