html判断是否有滚动条,JS 判断元素是否可以滚动
今天在解决 ios 移动端滚动穿透的问题时遇到一个问题,就是判断元素能否滚动,把这个过程记录下来。以下以纵向滚动为例,横向滚动同理。
嫌麻烦的可以直接查看代码。
基础概念
Element.scrollHeight
scrollHeight 是一个元素内容高度的度量,包括由于溢出导致的视图中不可见的内容,scrollHeight 的值等于元素在不能出现滚动条的时候展示出视图中所有内容所需要的最小高度。
如果元素内容能在不出现滚动条的情况下全部展示,那么元素的 scrollHeight 和 clientHeight 相等。MDN
Element.clientHeight
clientHeight 是指元素内部高度,包括 padding,但不包括 margin、border 以及 横向滚动条。
clientHeight = CSS height + CSS padding - height of horizontal scrollbar (if present)MDN
第一个方案
根据上面两个定义,很容易就想到可以通过比较 scrollHeight 和 clientHeight 的大小来判断元素是否可以滚动。最开始我就是这么做的。
function eleCanScroll(ele) {
return ele.scrollHeight > ele.clientHeight;
}
使用之后发现这个方法大部分时候判断是对的,但是在一些情况下就出现的偏差。
偏差1
查看demo
子元素超出父元素,而且父元素不设置 overflow: auto
偏差2
查看demo
子元素相对父元素绝对定位
上面的两个 demo 中,虽然 box 元素的 scrollHeight 大于 clientHeight,但是并不能滚动。
其实原因从 scrollHeight 的定义中就能找到,scrollHeight 是一个元素内容高度的度量,包括由于溢出导致的视图中不可见的内容,也就是说,只要元素的子元素没有完全在父级内容框中显示出来,不管是因为定位还是 translate 偏移导致,父级元素的 scrollHeight 就一定大于 clientHeight。而这里面很多情况下父级元素都是不能滚动的。
所以通过比较 scrollHeight 和 clientHeight 的大小来判断元素是否可以滚动的方法是错误的,我看网上有的解决办法是判断父级元素的 overflow 属性,但我们知道这样也是不对的。
解决方案
正确的解决办法就要从 scrollTop 上入手了。
Element.scrollTop
一个元素的 scrollTop 值是这个元素的顶部到视口可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。MDN
scrollTop 可以被设置为任何整数值,同时注意:如果一个元素不能被滚动(例如,它没有溢出,或者这个元素有一个"non-scrollable"属性), scrollTop将被设置为0。
根据上面 scrollTop 的语法我们就能找到解决方案。我们可以设置元素的 scrollTop = 1,再获取下 scrollTop,如果值变为 0,说明该元素不可以滚动。
代码地址
function eleCanScroll(ele) {
if (!ele instanceof HTMLElement) {
console.log("fuck off");
return;
}
if (ele.scrollTop > 0) {
return true;
} else {
ele.scrollTop++;
// 元素不能滚动的话,scrollTop 设置不会生效,还会置为 0
const top = ele.scrollTop;
// 重置滚动位置
top && (ele.scrollTop = 0);
return top > 0;
}
}
参考文档
关于找一找教程网
本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[JS 判断元素是否可以滚动]http://www.zyiz.net/tech/detail-114698.html
html判断是否有滚动条,JS 判断元素是否可以滚动相关推荐
- oracle 判断是否位汉字,js判断字符是否是汉字的两种方法小结
有时需要判断一个字符是不是汉字,比如在用户输入含有中英文的内容时,需要判断是否超过规定长度就要用到.用 Javascript 判断通常有两种方法. 1.用正则表达式判断 js判断字符是否是汉字 .co ...
- html判断是否在页面,js判断页面关闭
JavaScript判断某个页面是否已经关闭 var N=document.getElementById(your_submit_Id); var flag=0; N.attachEvent(&quo ...
- html判断是否有滚动条,如何判断有没有出现滚动条
API API 说明 clientWidth 内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0. Element.clientWidth 属性表示元素的内部宽度,以像素计. ...
- php 判断浏览器是ie,js判断是否是ie浏览器
怎么去看浏览器的内核等信息 ---- js的全局对象window子属性navigator.userAgent,这个属性是包含了浏览器信息的相关信息,包括我们需要的浏览器内核 navigator.use ...
- html5 判断是否安装app,js判断手机上是否安装app
通过js进行判断,判断手机上是否安装某一app,因为js并不能操作手机原生的API,所以它判断的方法只是通过动态生成iframe,用它打开app,看能不能打开,通过这个时间进行判断,下面有两段代码: ...
- js函数判断服务器文件是否为空,Js 判断数组是否为空或是否含有某个值
今天来说一下在前端的 JS 中关于数组的判断操作.比如 JS 判断数组是否为空,JS 判断数据中是否含有某个值.下面就来具体的说一下判断的方法吧. JS 判断数组是否为空 JS 判断数组是否为空,只要 ...
- JS判断滚动条到底部
form:http://www.uphtm.com/js/269.html判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. sc ...
- js判断数组里是否有重复元素的方法
转: js判断数组里是否有重复元素的方法 https://blog.csdn.net/longzhoufeng/article/details/78840974 第一种方法:但是下面的这种方法数字字符 ...
- html检查元素是否溢出方法,JS判断指定dom元素是否在屏幕内的方法实例
前言 刷网页的时候,有时会遇到这样一个情景,当某个dom元素滚到可见区域时,它就会展现显示动画,十分有趣.那么这是如何实现的呢? 实现原理 想要实现这个功能,就要知道具体的实现原理.下面直入主题. 我 ...
最新文章
- RCNN系列、Fast-RCNN、Faster-RCNN、R-FCN检测模型对比
- Github代码上传和下载
- 身份证到期需更换 警方提醒市民提前办理
- 蓝桥杯 算法训练试题 数据交换 Java
- 给JBoss种蛊分析
- Spring框架—SpringBean配置
- Linux文件查找命令具体解释-which whereis find locate
- 如何判断注册用户是否已经存在(membership验证)
- 红帽:将开源进行到底
- linux amd64 界面,linux脚本编程---ubuntu-12.04-server-amd64如何配置图形界面
- 李洪强iOS开发之Foundation框架—结构体
- 安装Android SDK时,点击SDK Manager.exe闪退,并且jdk的环境变量是对的。
- 通过释放cache内存解决ubuntu死机问题
- cocos2d笔记 (3)cocos2d四个基本概念
- ORACLE之常用FAQ V1.0二(构架系统) (1)
- 盘点云计算的概念,分类和特点
- win10 同时多用户远程桌面连接-RDPWrap-v1.6.2-support-21H2-19044.1949
- PHP 小程序中微信支付
- android中按钮凹下去,实现按钮的点击效果
- b站网页版倍速无效_看网课讲师太啰嗦太慢?在线视频课程效率低?教你自定义超倍速看
热门文章
- EFR32MG ZCL命令获取灯泡on-off属性状态
- Excel(三)之数据验证性——设置多功能下拉菜单
- 【小毛驴的絮叨】时间你慢慢走,我想欣赏一下沿途的风景(2020年11月)
- html程序国庆节祝福,2019国庆节祝福语送给朋友微信
- 如何针对企业产品进行有效分析,看大佬用SQL分析淘宝用户行为
- 找出最长单词(C语言)(指针实现)
- elastalert
- python学习笔记霍兰德人格分析与错误解决
- 生态 | 战略签约,人大金仓携手同联公司签署战略协议共同开创信息化创新发展新篇章!...
- 社区团购小程序拼团秒杀砍价社区发帖社区团小程序系统源码搭建教程