判断元素是否有滚动条

于 2022-09-19 18:55:06 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： 日常学习 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pink_cz/article/details/126939519
版权

判断元素是否有滚动条

今天遇到了一个业务场景，需要判断是否有滚动条的出现.
判断规则：
因为出现滚动条便意味着元素空间将大于其内容显示区域，根据这个现象便可以得到判断是否出现滚动条的规则.

判断竖向滚动条

el.scrollHeight > el.clientHeight

scrollHeight：
指的是元素的内容高度，即如果有滚动条，它的值会等于内容实际的高度加padding值（并不包含border和margin值），在没有内容溢出的情况下它的值等于clientHeight。

clientHeight：
指的是元素的内部高度的px值，包括content和padding值之和，并不包括横向滚动条（horizontal scrollbar）、border和margin的值

故如果每个元素的scrollHeight > clientHeight，则可以说明其出现了竖向滚动条

判断横向滚动条

el.scrollWidth > el.clientWidth

scrollWidth：
指的是元素的内容宽度，即如果有滚动条，它的值会等于内容实际的宽度加padding值（并不包含border和margin值），在没有内容溢出的情况下它的值等于clientWidth

clientWidth：
指的是元素的内部宽度的px值，包括content和padding值之和，并不包括横向滚动条（horizontal scrollbar）、border和margin的值。

故如果每个元素的scrollWidth > clientWidth，则可以说明其出现了横向滚动条.

好 运.
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js 原生判断内容区域是否滚动到底部的实例代码
01-19
逻辑 判断内容滚动到底需要知道的信息 内容区域的真实高度（也就是滚动区域） 滚动条距离顶部的位置 内容区域的可见高度 分别对应下面的三个API。 element.scrollHeight 获取元素内容高度，，，【只读属性】 element.scrollTop 可以获取或者设置元素的偏移值，常用于，计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0. element.clientHeight 读取元素的可见高度【只读属性】 下面直接引用MDN上面的一个经典的公式 判定元素是否滚动到底 如果元素滚动到底，下面等式返回true，没有则返回false.
CSS 文本溢出 —— overflow
白菜执笔人的博客
10-21 513
Web前端基础 学习笔记 CSS 文本溢出 - overflow 使用 verflow 属性：定义溢出元素内容区的内容会如何处理 语法： { overflow: visible / hidden / scroll / auto / inherit; } 说明: visible: 默认值，内容不会被修剪，会出现在元素框之外； hidden: 内容会被修剪,并且其余内容是不可见的； scroll...
如何快速找到是哪个元素产生滚动
m0_48607837的博客
11-01 1459
把以下代码复制粘贴到浏览器 Console 面板,敲一下回车 function findscroller(element){ element.onscroll=function () { console.log(element) } Array.from(element.children).forEach(findscroller) } findscroller(document.body) 复制到 Console
前端：判断当前元素，是否有滚动条
qq_33172029的博客
05-30 6462
思路：判断当前dom是否有滚动条（横轴，纵轴），依据是：当前dom的内容，是否超过当前页面的可见宽高即可 代码：（这里最好不能添加=号） //判断是否有滚动条：vertical纵轴，horizontal横轴 function hasScrolled(element,direction){ if(direction==='vertical'){ return eleme...
css控制滚动条的显示与隐藏
weixin_45606890的博客
07-15 4487
方法一：通过固定宽度样式将滚动条给隐藏起来。/* 防止滚动条遮挡内容 */
判断 是否 出现滚动条
胡子
10-21 1196
//可用于实现固定表头。数据下拉的功能，  function gun() {     var bro = $.browser;     var binfo = "";     if (bro.msie) { binfo = bro.version; }     if (binfo != "7.0") {         var obj = document.getElementById
如何判断页面是否有滚动条？
qq_38152997的博客
08-02 3942
横向滚动条： 当可视区域小于页面的实际宽度时，判定为出现滚动条，即： if (document.documentElement.clientWidth < document.documentElement.offsetWidth){} 竖向滚动条： 当可视区域小于页面的实际高度时，判定为出现滚动条，即： if (document.documentElement.clientHeight &l...
jQuery判断是否存在滚动条
热门推荐
Inuyasha1121的专栏
11-26 1万+
利用jQuery控制滚动条滚动，再判断滚动条是否有偏移。如果有，则存在滚动条，相反没有滚动就不存在。 $(function(){ $("body").scrollTop(10);//控制滚动条下移10px if( $("body").scrollTop()>0 ){ alert("有滚动条"); }else{ alert("没有滚动条")
判断有没有滚动条
feiduoge的博客
04-02 447
比较界面和客户区的大小，判断有没有横向滚动条1.CRect rectWnd, rectClient; GetWindowRect(&amp;rectWnd); GetClientRect(&amp;rectClient); if(rectWnd.Height()-rectClient.Height() &gt;= GetSystemMetrics(SM_CYHSCROLL)) {}if(r...
JS判断页面是否出现滚动条的方法
10-23
主要介绍了JS判断页面是否出现滚动条的方法,涉及javascript针对页面元素的读取与判定实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS实现利用闭包判断Dom元素和滚动条的方向示例
10-16
主要介绍了JS实现利用闭包判断Dom元素和滚动条的方向,涉及javascript闭包、事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下
jQuery检测滚动条是否到达底部
11-23
scrollTop() 获取匹配元素相对滚动条顶部的偏移。 scrollLeft() 获取匹配元素相对滚动条左侧的偏移。 scroll([[data],fn]) 当滚动条发生变化时触犯scroll事件 jQuery检测滚动条到达底部代码： $(docum
浅析jquery如何判断滚动条滚到页面底部并执行事件
11-23
clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。 offsetHeight：是指元素内容的高度。依照上面...
js判断滚动条是否已到页面最底部或顶部实例
03-16
主要介绍了js判断滚动条是否已到页面最底部或顶部的原理与方法,以实例的形式详细分析了js实现返回顶部功能所涉及的各种技巧,并对相关知识点进行了总结归纳,需要的朋友可以参考下
检查元素是否可滚动
liuhao9999的博客
07-26 178
代码】检查元素是否可滚动。
html 判断滚动条,jquery如何判断是否有滚动条？
weixin_33983238的博客
06-07 370
jquery如何判断是否有滚动条？下面本篇文章就来给大家介绍一下jQuery判断是否存在滚动条的简单方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。利用jQuery scrollTop()来控制滚动条滚动，再判断滚动条是否有偏移。如果有，则存在滚动条，相反没有滚动就不存在。$(function(){$("body").scrollTop(10);//控制滚动条下移10pxif...
jQuery判断是否存在滚动条的方法
kexin178的博客
03-07 255
jQuery判断是否存在滚动条的方法：首先创建一个前端代码示例文件；然后利用jQuery控制滚动条滚动；最后通过“if( $("body").scrollTop()>0 ){...}else{...}”语句判断滚动条是否有偏移即可。 本教程操作环境：Windows7系统、jquery1.10.0版本，该方法适用于所有品牌电脑。 推荐：jquery视频教程 jQuery判断是否存在滚动条 利用jQuery控制滚动条滚动，再判断滚动条是否有偏移。如果有，则存在滚动条，相反没有滚动就不存在。 1 2 3 4
vue中怎么判断div是否有滚动条
最新发布
07-22
在Vue中，你可以使用JavaScript来判断一个div元素是否有滚动条。下面是一个示例代码： ```html <template> <div ref="scrollContainer" @scroll="checkScrollbar"> <!-- 内容 --> </div> </template> <script> export default { methods: { checkScrollbar() { const scrollContainer = this.$refs.scrollContainer; const hasScrollbar = scrollContainer.scrollHeight > scrollContainer.clientHeight; if (hasScrollbar) { console.log('该div有滚动条'); } else { console.log('该div没有滚动条'); } } } } </script> ``` 在这个示例中，我们给要检查的div元素添加了一个ref属性，以便在Vue组件中引用它。然后，我们在div元素上绑定了scroll事件，并调用`checkScrollbar`方法。 在`checkScrollbar`方法中，我们通过比较div元素的`scrollHeight`和`clientHeight`来判断是否有滚动条。如果`scrollHeight`大于`clientHeight`，则表示内容高度超过容器高度，即有滚动条。 根据判断结果，你可以执行需要的操作。在示例代码中，我们简单地使用`console.log`输出结果。你可以根据实际需求进行相应的处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

好 运.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值