JS决断页面是或不是出现滚动条的不二诀要,判别

作者: 韦德国际1946国际网址  发布:2019-05-28

前言

正文实例讲述了JS判定页面是或不是出现滚动条的办法。分享给大家供我们参照他事他说加以考察。具体如下:

前言

近期在写插件的长河中,需求利用 JS 判断是不是有滚动条,搜了刹那间,大约方法都大致,但都有一点啰嗦,代码远远不够简洁。最后经过参谋不相同措施,写了二个相比简单的法子。在认清滚动条的还要也急需总计滚动条的大幅度,通过本篇文章1并与大家享受。

后天无聊,帮贰个网上亲密的朋友化解叁个很无聊的主题材料,用JS推断页面是不是出现滚动条,在网络看了有的代码,经过认证并不起成效,下边是在英特网查找到的代码:

不久前在写插件的长河中,须求选用 JS 推断是或不是有滚动条,搜了弹指间,大概方法都大约,但都有一点点啰嗦,代码相当不够简洁。最终通过参照他事他说加以考察分歧格局,写了一个相比轻便的不贰秘技。在认清滚动条的同一时候也须求计算滚动条的大幅,通过本篇文章1并与我们享受。

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
   };
 };

缘何要咬定滚动条

图片 1

JS决断页面是或不是出现滚动条的不二诀要,判别页面是或不是有滚动条的简便方法。看清滚动条的急需在弹窗插件中用的较多,因为弹窗繁多会增添 overflow: hidden 的质量,假使页面前遭受比长的话,加多那性情子之后页面会有挥舞。

为了增长用户体验,通过决断是或不是有滚动条而增多 margin-left 属性以抵消 overflow: hidden 之后的滚动条地点。

 

为啥要看清滚动条

 希望本文所述对大家的javascript程序设计有着援救。

推断是还是不是有滚动条的点子

其实只需求1行 JS 就可以,测试非常 IE七

function hasScrollbar() {
    return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}

诚如情状下,使用 document.body.scrollHeight > window.innerHeight 就足以料定。

但是在 IE7,IE8 中 window.innerHeightunderfined,所认为了合营IE柒、IE八,需求选取 document.documentElement.clientHeight 属性计算窗口中度。

当可视区域小于页面包车型地铁骨子里中度时,决断为出现滚动条,即:

图片 2

你恐怕感兴趣的篇章:

  • JS完成判定滚动条滚到页面底部并推行事件的法子
  • js判定滚动条是或不是已到页面最尾部或顶上部分实例
  • 认清滚动条到底层的JS代码
  • js滚动条回来顶端的代码
  • 当滚动条滚动到页面尾巴部分自动加载扩展内容的js代码
  • js操作滚动条事件实例
  • JS JQUE奥迪Q7Y达成滚动条自动滚到底的点子
  • JS和JQUE途乐Y获取页面大小,滚动条地点,成分位置(示例代码)
  • js DIV滚动条随飞机地方置的设置技巧
  • js网页滚动条滚动事件实例剖判
  • JS轻巧判别滚动条的轮转方向完毕情势

算算滚动条宽度的主意

要么以弹窗为例,因为 IE 十以上以及运动端浏览器的滚动条都以不占用页面宽度的晶莹样式(当中 IE 10以上浏览器能够透过 CSS 属性还原原始的滚动条样式),所认为了进一步升高用户体验,大家还亟需计算滚动条的拉长率,依照气象增加合理的 margin-left 数值。

图片 3

计算滚动条宽度的章程相比较简单,新建2个暗含滚动条的 div 成分,通过该因素的 offsetWidthclientWidth 的差值就可以获得,笔者在此借鉴 Magnific-popup 中的方法

function getScrollbarWidth() {

    var scrollDiv = document.createElement("div");
    scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
    document.body.appendChild(scrollDiv);
    var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
    document.body.removeChild(scrollDiv);

    return scrollbarWidth;

}

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;

推断滚动条的需要在弹窗插件中用的较多,因为弹窗大多会加多 overflow: hidden的质量,假诺页面临比长的话,增添那本性子之后页面会有摇摆。

总结

利用 JS 完成1个功效恐怕并不困难,但作为编制程序职员应该随时思虑什么更简短更优雅的兑现这一个功用,并且每一日以进级用户体验为尺度。对于标准推断,可能十行的逻辑推断恐怕只须求1行,方今感受极为深入,而且要善于利用长富表明式取代 if..else 来精简代码。

要使用 document.documentElement ,必须在页面尾部出席注明:

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:JS决断页面是或不是出现滚动条的不二诀要,判别

关键词: JavaScript js 滚动条判断 滚动条宽度 弹窗