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
分享到：
相关推荐
js 实现 记录滚动条位置! 值得下载看看!资源免费,大家分享!!
javascript 实现滚动条滚动到一定距离时显示层 可以兼容全部浏览器。
js控制滚动条的位置
vant list组件滚动保留滚动条位置 vant list组件滚动保留滚动条位置，需结合keepAlive使用，分享此篇，供大家参考。 1、保存位置的前提是用的keepAlive组件来做缓存，app.vue代码 <template> <div id="app"> ...
JS滚动条属性值，取得滚动条各种数据值，简单处理JS操作滚动条
js 模拟滚动条js 模拟滚动条js 模拟滚动条js 模拟滚动条
主要介绍了js获取滚动距离的方法,涉及javascript针对页面滚动条的相关操作技巧,需要的朋友可以参考下
JavaScript 获取滚动条位置并将页面滑动到锚点 前言 这篇来记录下最近工作中遇到的一个问题，在app原生和前端h5混合开发的过程中，其中一个页面是选择城市列表的页面，类似于美团饿了么城市选择，银行app中银行...
保持页面滚动条位置的javascript代码
1.通过JS技术把获取已知图片的像素值 2.获取到像素值去除A通道干扰 3.把最终的像素值一维数组转换HTML文件格式并导出到文件 4.懂JS获取文件内容的技术人员可以通过JS获取导出的文件内容，赋值给HTML标签，这样图片就...
JS 类似BBS控制输入框输入信息后，滚动条自动滚到最下方，始终显示最后输入的一条信息，在做BBS的兄弟，可以参考一下思想
javascript 模拟 滚动条 能动态添加内容
js自定义滚动条插件,自定义滚动按钮皮肤和滚动条皮肤。 内有demo演示
JS模仿滚动条，超酷，超炫，超简单，源码释放，容易学习，容易上手，值得收藏哦！ JS模仿滚动条，超酷，超炫，超简单，源码释放，容易学习，容易上手，值得收藏哦！
js模拟滚动条,相当好用,让你的滚动条变得绚丽!
js 自定义滚动条样式 颜色大小在css调节 绑定节点在js代码第一个函数修改
使用原生js获取浏览器可是高度，滚动条高度，监听滚动条，滑动时 触发 改变导航元素位置，和子元素样式，适合新手参考借鉴！
当前页面刷新的时候，滚动条会定位到刷新前的位置
Js自定义的滚动条拖动缓冲插件 Dean Edward所写的... 为每个事件赋予独立的ID，建立一个类型的散列表，滚动条的可以移动距离,初始位置,x,y是滑块相对父级元素的，即relative，x,y是相对父级元素的，即relative。
javascript 美化滚动条javascript 美化滚动条