`

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判断页面是否出现滚动条的方法

    通过检查这两个元素的`scrollLeft`(水平滚动的位置)和`scrollTop`(垂直滚动的位置)属性,我们可以判断出滚动条是否出现。 在函数中,我们定义了两个布尔类型的变量`scrollX`和`scrollY`,分别用来标志水平和...

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

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

    js : 隐藏滚动条利用滚轴滚动

    在JavaScript和jQuery的世界里,有时候我们可能需要在页面设计中隐藏滚动条,以达到更加美观或者特定的视觉效果。然而,隐藏滚动条并不意味着要牺牲滚动功能,通过一些技巧,我们依然可以让用户通过滚轴来查看页面...

    判断滚动条是否滚动到底部以及判断页面数据是否修改

    总的来说,"判断滚动条是否滚动到底部"和"判断页面数据是否修改"是前端开发中的基础任务,涉及了事件处理、DOM操作以及兼容性处理等多个方面。通过理解并熟练运用这些知识点,开发者可以创建出更加智能和响应式的...

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

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

    简单JS随滚动条滚动导航

    【标题】"简单JS随滚动条滚动导航"所涉及的知识点主要集中在JavaScript的事件监听、DOM操作以及CSS样式实现上。这种类型的导航栏通常用于网页设计中,它能随着用户滚动页面而改变位置,始终保持在可见区域,为用户...

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

    以下将详细介绍如何使用JS判断滚动条是否已经到达页面的底部或顶部。 首先,我们需要理解几个关键的概念: 1. `document.documentElement`: 这个对象代表HTML元素,即整个HTML文档的根元素。 2. `clientHeight` 和 ...

    各种滚动条的获取

    接着,`common_util.js`可能包含了通用的JavaScript工具函数,其中可能包含获取和操作滚动条位置的函数。在JavaScript中,可以使用`window.scrollX`和`window.scrollY`获取当前页面的水平和垂直滚动位置。对于特定...

    html_javascript_监听滚动条demo

    在JavaScript中,`window`对象提供了`scrollY`属性,它表示浏览器窗口顶部到文档顶部的距离,也就是滚动条滚动的距离。另外,`document.documentElement.clientHeight`和`document.documentElement.scrollHeight`...

    jQuery判断是否存在滚动条的简单方法

    通过本文的描述和示例代码,我们可以了解到判断滚动条存在与否的一种简便手段。主要思路是通过jQuery提供的方法控制页面元素(如)的滚动,然后检查其滚动条的位置信息。 在jQuery中,可以使用`scrollTop()`方法来...

    javascript获取滚动条高度 页面宽度与高度

    ### JavaScript 获取滚动条高度、页面宽度与高度 在前端开发中,经常需要处理与浏览器窗口相关的操作,例如响应式设计、动态布局调整等。本文将详细介绍如何使用JavaScript来获取滚动条的高度、页面的宽度和高度。 ...

    兼容IE的滚动条

    在处理滚动条兼容性时,Modernizr可以帮助判断浏览器是否支持自定义滚动条,然后根据结果选择相应的解决方案。 5. **Graceful Degradation 和 Progressive Enhancement**:这两种策略是确保网页在旧浏览器中也能...

    【JavaScript源代码】vant list组件滚动保留滚动条位置.docx

    然后,在`main.js`中,我们可以监听路由变化,利用`router.beforeEach`全局守卫来处理滚动条位置的保存。当从一个需要缓存的页面跳转时,我们获取当前页面(`from`)的滚动条位置,并将其保存到`from.meta.scrollTop...

    javascript经典特效---去掉页面的滚动条.rar

    因此,在设计时要考虑清楚是否真的需要去除滚动条,或者是否有其他更好的替代方案,比如使用自定义滚动条(CSS Scrollbars)来保持美观的同时,保证用户能够浏览全部内容。 总的来说,掌握如何使用JavaScript处理...

    阻止滚动条事件冒泡

    标题中的“阻止滚动条事件冒泡”指的是在用户滚动页面某个部分时,阻止这个滚动事件向上传递到其他元素或窗口,特别是阻止`mousewheel`事件的冒泡。`mousewheel`事件通常用于处理鼠标滚轮滚动的行为,它在用户滚动...

    弹出框随滚动条滚动

    标题中的“弹出框随滚动条...综上所述,“弹出框随滚动条滚动”的实现涉及了JavaScript事件处理、坐标计算、CSS定位、性能优化等多个方面。开发者需要综合运用这些知识,创建出流畅且用户体验良好的滚动弹出框功能。

    js三级滚动条

    - 通过`getBoundingClientRect()`方法获取元素在视口中的位置,判断是否需要显示滚动条。 4. **事件处理**: - 当用户滚动时,可以通过`scroll`事件监听滚动条的位置变化,根据当前滚动位置动态更新内容或高亮...

Global site tag (gtag.js) - Google Analytics