记录--谁还没个靠bug才能正常运行的程序
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
最近遇到一个问题,计算滚动距离,滚动比例达到某界定值时,显示mask,很常见吧^ _ ^
这里讲的不是这个需求的实现,是其中遇到了一个比较有意思的bug,靠这个bug才达到了正确效果,以及这个bug是如何暴露的(很重要
)。
下面是演示代码和动图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 300px;
max-height: 300px;
background-color: black;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
overflow-y: auto;
}
.child {
width: 260px;
height: 600px;
margin: 0px 20px;
background-color: pink;
position: relative;
}
.flag {
position: absolute;
width: 100%;
height: 25px;
background-color: blueviolet;
color: aliceblue;
text-align: center;
line-height: 25px;
font-size: 14px;
left: 0;
right: 0;
}
.top {
top: 0;
}
.bottom {
bottom: 0px;
}
</style>
</head> <body>
<div class="container">
<div class="child">
<div class="flag top">top</div>
<div class="flag bottom">bottom</div>
</div>
</div>
</body>
</html>
开始计算啦,公式:滚动比例
= 滚动距离
/ 可滚动距离
滚动距离
: $0.scrollTop
可滚动距离
: $0.scrollHeight - $0.offsetHeight
即:scrollRatio = scrollTop / (scrollHeight - offsetHeight)
滚动到底部,计算结果是 300 / (600 - 300) = 1
我们需要拿scrollRatio
和某界定值(比如0.1)
作大小的比较,计算是true
还是false
(用isShow = scrollRatio < 某界定值
来保存)。
这里一切正常。
不正常的情况出现了
就是没有出现滚动条的情况,即.child
的高度没有超过.container
的高度时,把.child
的高度设成.container
的max-height
,就没有滚动条了(下面讲的情景也都是没有滚动条的情况)。
这个时候再去计算,得到了NaN,以至于 NaN < 0.1 = false
。
因为isShow
的预期就是false
,所以一直都没有发现这个bug。
那么它是如何暴露的呢?
后来新的需求给.container
加了border。演示一下加border,然后再去计算:
发现没,这时候$0.offsetHeight
的高度把border的高度也算进去了,结果就成了true
,这不是想要的结果 。
然后就是一番查验
offsetHeight
是一个元素的总高度,包括可见内容的高度、内边距(padding)、滚动条的高度(如果存在)以及边框(border)的高度。
而我们这里只需要可见的高度,就可以用到另一个属性了clientHeight
。
clientHeight
是指元素的可见内容区域的高度,不包括滚动条的高度和边框的高度。它仅包括元素的内部空间,即内容加上内边距。
当然这也只是继续使除数为0,然后得到结果为NaN,不过bug已经暴露出来了,后面就是一些其他的优化啦~
总结 + 复习(盒模型 box-sizing)
发现没有,offsetHeight
和clientHeight
的区别,就像盒模型
中的标准盒模型
和怪异盒模型
的区别:
box-sizing: content-box
(默认,标准盒模型):宽度和高度的计算值都 不包含 内容的边框(border)和内边距(padding)。添加padding和border时, 会 使整个div的宽高变大。
box-sizing: border-box
(怪异盒模型):宽度和高度的计算值都 包含 内容的边框(border)和内边距(padding)。添加padding和border时, 不会 使整个div的宽高变大。
本文转载于:
https://juejin.cn/post/7283087306603823116
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
记录--谁还没个靠bug才能正常运行的程序的更多相关文章
- postman tests实例记录(还没看,一些常用的)
这段时间准备测试api接口,postman这个工具很是方便,特别是里面的tests的javascript脚本. 记录一下测试接口常用的tests验证的实例. 1.设置环境变量 postman.setE ...
- 你好,C++(21)只要天还没黑,就一直在工地干活-4.3.1 while循环:只要…就一直…
4.3 循环控制语句 在现实世界中,有这样一类现象: 只要油箱中的当前油量小于油箱容量100升,就一直往油箱中加油: 一直不断地为祖国辛勤工作,只要我还活着: 公司100000位员工,每个人的工资都 ...
- 谁还没遇上过NoClassDefFoundError咋地——浅谈字节码生成与热部署
谁还没遇上过NoClassDefFoundError咋地--浅谈字节码生成与热部署 前言 在Java程序员的世界里,NoClassDefFoundError是一类相当令人厌恶的错误,因为这类错误通常非 ...
- .Net Actor 服务端开发框架,Newbe.Claptrap 项目周报 1 - 还没轮影,先用轮跑
Newbe.Claptrap 项目周报 1,第一周代码写了一点.但主要还是考虑理论可行性. 第一次接触本框架的读者,可以先点击此处阅读本框架相关的基础理论和工作原理. 周报是啥? 成功的开源作品,离不 ...
- git删除已经提交的包含敏感信息的文件(还没提交到远程仓库)
写好的代码已经提交了(但还没push到github),发现某个文件里包含密码.如果push的话,密码可就被公开了.如果在代码里改掉密码,再commit一次,也不行,历史提交记录还是会上传到github ...
- 不会吧,你连Java 多线程线程安全都还没搞明白,难怪你面试总不过
什么是线程安全? 当一个线程在同一时刻共享同一个全局变量或静态变量时,可能会受到其他线程的干扰,导致数据有问题,这种现象就叫线程安全问题. 为什么有线程安全问题? 当多个线程同时共享,同一个全局变量或 ...
- 升级过log4j,却还没搞懂log4j漏洞的本质?
摘要:log4j远程代码漏洞问题被大范围曝光后已经有一段时间了,今天完整讲清JNDI和RMI以及该漏洞的深层原因. 本文分享自华为云社区<升级过log4j,却还没搞懂log4j漏洞的本质?为你完 ...
- 字节一面:事务还没提交的时候,redolog 能不能被持久化到磁盘呢?
又是被自己菜醒的一天,总结面经看到这题目听都没听过,打开百度就像吃饭一样自然 老规矩,背诵版在文末.点击阅读原文可以直达我收录整理的各大厂面试真题 首先,咱需要明白的是,啥是持久化? 听起来高大上,换 ...
- 在各方面还没准备好的时候,大家一定要慎用border-box样式!!!!
这几天,我被一个js问题困扰到癫狂了! 事情是这样的,我之前写了个功能非常复杂的纯jquery代码的前端gridview控件,实现了大量的功能和效果,在一些项目里也用得很好. 最近有个项目,样式做了调 ...
- 成功熬了四年还没死?一个IT屌丝创业者的深刻反思
三个IT屌丝创业的故事 从前有三个屌丝,聚在一起做网络.提供免费的网络服务,砸锅卖铁,通宵达旦,除了卖肾,啥都做了.3年后终于做到了五百万用户.对于年轻人来说,能把五百万人玩弄于鼓掌之间,已经是很牛逼 ...
随机推荐
- [Java]《On Java》阅读记录之 -- 可变参数重载问题
<On Java>阅读记录之 -- 可变参数重载问题 有下面一段代码: public class OverloadingVarargs2 { static void f(float i , ...
- IPNS和DNSLink的使用说明
IPNS和DNSLink的使用说明 IPNS说明 IPNS全称InterPlanetary Name System,就是IPFS下的一个名称解析系统,类似于互联网的DNS,但是与DNS不同的是,IPN ...
- let与const
let与const ES2015(ES6)新增加了两个重要的JavaScript关键字: let和const. 块级作用域 代码块内如果存在let或者const,代码块会对这些命令声明的变量从块的开始 ...
- ElementUI导入Excel文件
功能介绍 最近用ElementUI做管理系统需要把excel数据导入到系统内,我想这是一个很常见的功能点,把它分享出来,希望对大家有所帮助:) 实现效果 实现步骤 1.定义导入组件 <el-up ...
- 如何在 libevent 中读取超过 4096 字节的数据
如何在 libevent 中读取超过 4096 字节的数据 bufferevent 是 libevent 中相对高层的封装,较 event 使用起来方便很多. 之前有一个需求,需要从服务端读取数据进行 ...
- vivo 短视频体验与成本优化实践
作者:来自 vivo 互联网短视频研发团队 本文根据蔡创业.马运杰老师在"2023 vivo开发者大会"现场演讲内容整理而成. 在线点播场景,播放体验提升与成本优化是同等重要的两件 ...
- 【Android 逆向】【ARM汇编】 堆栈
arm 四种栈 1 空栈 栈指针指向空位,每次存入时可以直接存入然后栈指针移动一格:而取出时需要先移动一格才能取出 2 满栈 栈指针指向栈中最后一格数据.每次存入时需要先移动栈指针一格再存入.取出时可 ...
- 【LeetCode哈希表】前k个高频词,利用哈希表+vector进行排序操作
前k个高频词 https://leetcode.cn/problems/top-k-frequent-words/ 给定一个单词列表 words 和一个整数 k ,返回前 k 个出现次数最多的单词. ...
- 【Azure 应用服务】在创建Web App Service的时候,选Linux系统后无法使用Mysql in App
问题描述 如图上,是App Services在Windows环境中,系统自带了MySQL In App功能.而在,Linux环境中,没有发现Mysql in App功能,是不是无法在Linux中使用呢 ...
- 【Azure 应用服务】记一次 App Service 部分请求一直返回 401 "No Authority" 的情况
问题描述 发现部署在App Service上的 WCF 应用对于所请求的接口出现部分返回 401 - No Authority 消息,10次中有一次这样的概率.比较疑惑的问题是,应用没有更新,所以怀疑 ...