`

js判断是否出现滚动条

 
阅读更多

当可视区域小于页面的实际高度时,判定为出现滚动条,即:

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

要使用 document.documentElement ,必须在页面头部加入声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

其实,这段代码是不起作用的,因为他没考虑到一个问题,就是浏览器的边框,当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的,浏览器的边框是2个像素,所以这时无论在任何情况下clientHeight 始终是小于offsetHeight的,这就使得即使没有滚动条它也为true,因此我们要修正这个错误,代码应该这样改,在offsetHeight上减去4个像素,即:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){

//执行相关脚本。

}

还有,这里要搞清楚,上面这代码是判断横向滚动条的,我们一般要判断的是纵向滚动,代码如下:

 

if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){

//执行相关脚本。

分享到:
评论

相关推荐

    JS简单判断滚动条的滚动方向实现方法

    本文实例讲述了JS简单判断滚动条的滚动方向实现方法。分享给大家供大家参考,具体如下: 以下代码实现判断页面的滚动条的滚动方向; var sign = 80;//定义默认的向上滚与向下滚的边界 [removed] = [removed] = ...

    通过 JS 判断页面是否有滚动条的实现方法

    在判断滚动条的同时也需要计算滚动条的宽度,通过本篇文章一并与大家分享。 为什么要判断滚动条 判断滚动条的需求在弹窗插件中用的较多,因为弹窗大多会添加 overflow: hidden 的属性,如果页面比较长的话,添加这...

    JS判断页面是否出现滚动条的方法

    主要介绍了JS判断页面是否出现滚动条的方法,涉及javascript针对页面元素的读取与判定实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    js实现的判断滚动条是否到底部的特效源码.zip

    js实现的判断滚动条是否到底部的特效源码是一段可以判定有没有浏览到网页最底部的效果代码,将网页拖动或利用鼠标滚轮滚动到最底部后,页面中就会提示一段“滚动条,已经到底部了!”的提示语,本段代码适应于所有...

    js判断滚动条是否已到页面最底部或顶部实例

    本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,...

    判断滚动条到底部的JS代码

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出...

    移动端html5判断是否滚动到底部并且下拉加载

    如何判断滚动是否滚动到了底部? 首先要了解的知识 scrollHeight,clientHeight,scrollTop scrollHeight 只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读...

    JS滚动加载图片

    导入脚本 导入imgRunLoading.js脚本文件,或将其写入您的常用脚本文件中。 脚本代码片段提供未压缩和压缩过后的2种代码片段供你选择,请根据实际情况自行判断。...起效漏洞:仅对竖向滚动条起效,无视横向滚动条

    JS实现利用闭包判断Dom元素和滚动条的方向示例

    一、判断滚动条的方向,利用闭包首先保存滚动条的位置,然后当滚动时候不断更新滚动初始值,然后通过差指判断方向 function scroll(fn) { //利用闭包判断滚动条滚动的方向 var beforeScrollTop = document.body....

    jQuery实现判断滚动条滚动到document底部的方法分析

    本文实例讲述了jQuery实现判断滚动条滚动到document底部的方法。分享给大家供大家参考,具体如下: 滚动条没有实际的高度。只是为了呈现效果才在外型上面有长度。 在js当中也没有提供滚动条的高度API。 参考了网上...

    js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法。分享给大家供大家参考。具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:[removed]。当onscroll事件发生时,用js获得页面的scrollTop值...

    JS实现判断滚动条滚到页面底部并执行事件的方法

    主要介绍了JS实现判断滚动条滚到页面底部并执行事件的方法,本文先是分析了需求以及必备知识,然后给出实现代码,需要的朋友可以参考下

    vue 纯js监听滚动条到底部的实例讲解

    1、怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: [removed] = ...

    js实现的判断滚动条是否到底部的特效特效代码

    js实现的判断滚动条是否到底部的特效源码是一段可以判定有没有浏览到网页最底部的效果代码,将网页拖动或利用鼠标滚轮滚动到最底部后,页面中就会提示一段滚动条,已经到底部了!的提示语,本段代码适应于所有网页...

    jQuery实现判断滚动条到底部

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出...

    js返回头部,js自动适应浏览器宽度 js自动判断宽高

    js返回头部代码(不是jquery),类似京东商城右侧的返回头部功能,当滚动条移出第一屏时返回top出现(涉及到读取滚动条位置)。 里面包含 js自动实时判断浏览器窗口大小(有拆分出来)的功能,灵活变通下可以变换成...

Global site tag (gtag.js) - Google Analytics