JS判断是否出现滚动条

http://www.cnblogs.com/yazdao/archive/2010/12/06/1897742.html

该博文是想用JS检测浏览器是否出滚动条。

 

这边想到一个比较取巧的方法,

假如没有出滚动条的时候,手工给增加一个滚动值会怎么样?

程序上就是给body或documentElement的scrollLeft、scrollTop赋值,

马上动手实现了一下,结果跟我意想的差不多,呵呵

浏览器在没有出滚动条的时候,赋值后该值不会发生变化,始终是0。

 

 

另外扩展了一下,该检测方法,不仅可以检测页面滚动条,

传入要检测的节点,一样可以得到想要的结果。

 

以下是我的实现,没有做太多异常处理:

(给scrollLeft,scrollTop赋负数值时会报错,此外scrollLeft,scrollTop的值不能大于实际最大的滚动值)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var isScroll = function (el) {
             // test targets
             var elems = el ? [el] : [document.documentElement, document.body];
             var scrollX = false, scrollY = false;
             for (var i = 0; i < elems.length; i++) {
                 var o = elems[i];
                 // test horizontal
                 var sl = o.scrollLeft;
                 o.scrollLeft += (sl > 0) ? -1 : 1;
                 o.scrollLeft !== sl && (scrollX = scrollX || true);
                 o.scrollLeft = sl;
                 // test vertical
                 var st = o.scrollTop;
                 o.scrollTop += (st > 0) ? -1 : 1;
                 o.scrollTop !== st && (scrollY = scrollY || true);
                 o.scrollTop = st;
             }
             // ret
             return {
                 scrollX: scrollX,
                 scrollY: scrollY
             };
         };<br>出自于:http://my.oschina.net/oncereply/blog/38511

  

posted @   鞋带松了  阅读(3048)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示