js实现阅读内容滚动到底部显示下载功能

今天, 我们使用原生js来实现一下滚动阅读到底部, 才会显示按钮功能

下午的时候, 同事问了一个关于这个的问题, 晚上回到家, 动手实现一下这个功能

在平常的开发中, 我们确实经常会遇到这种功能, 比如对于一些重要的通知, 我们希望用户认真阅读完, 才会显示关闭弹窗的按钮

我们先来写一下样式

这样, 我们的页面就可以呈现出来了

接下来, 我们获取一下这两个dom元素

随后, 我们给dialog注册一个滚动事件

dialog.addEventListener(‘scroll’, () => {})
写到这里, 先暂停一下, 捋一下思路, 再往下写功能, 我们既然是需要滚动, 注册滚动事件是在所难免的, 这个方向是对的, 随后, 我们在滚动事件触发的同时, 也需要进行计算

其实, 我们可以计算出还剩多少, 才可以展示按钮

那么如何来计算呢?

这个时候, 我们需要了解几个属性, 这几个属性可以帮助我们完成这个功能

第一个就是scrollTop属性, 这个属性可以获取到一个元素内容垂直滚动的像素值

好像不太好理解, 那可以这么说, 就是卷出去的距离, 元素内容顶部, 到视口可见内容顶部的距离

我们不妨可以打印一下

可以看到一直在往上滚动, 数字一直在变大

这个属性介绍完之后, 我们介绍一下scrollHeight, 这个属性是什么呢?

该元素可以让我获取到滚动内容的大小, 包括不可见的部分

这里直接看MDN给出的图是最直观的

打印看一下

高度怎么是1040呢, 其实我们上面设置样式的时候给了高度1000像素, 设置了内边距20像素, 这个元素大家知道以后, 还有一个元素, 我们就可以实现这个功能了

随后需要了解clientHeight, 这个属性可以返回视口高度, 我们可以通过高度+内边距来计算, 不包括外边距, 边框和水平滚动条

这里, 我还是放了一张MDN的图, 大家就明白clientHeight到底是计算哪里的

上面上个属性都介绍完了, 如何计算就不是问题了

我们可以让滚动内容的高度减去视口高度, 因为滚动到底部, 我们其实是可以看见了, 将其减去, 在进入的那一刻, 显示下载按钮

再将卷出去的距离除以减去的距离即可

const scrollPercent = (content.scrollTop / (content.scrollHeight – content.clientHeight)) * 100;
我们滚动打印一下

这样我们的功能即将完成

这个小功能就做完了

大家后面开发再遇到这样的需求, 一定要记住这几个属性

就算再怎么变, 滚动到底显示或者禁用内容, 思路是一致的

今天就讲解到这里

我们明天见