业务主要是注册页面，有很长的条款需要用户去读，必须确认用户是不是看到全部的条款，这个场景下可以使用
效果
代码实现
- 必要的css
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
width: 330px;
height: 100%;
/* height: 200px; */
background-color: #eee;
overflow: auto;
margin: 0 auto;
text-align: left;
}
li{
background-color: #e5e5e5;
}
.container{
height: 100vh;
background: linear-gradient(201deg,#F9F2FF 0%,#8EC5FC 100%);
}
.modal{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 800px;
height: 600px;
background-color: #eee;
border-radius: 10px;
white-space: normal;
text-align: center;
}
.content h2 {
text-align: center;
margin: 10px auto;
}
#outer{
width: 100%;
padding: 20px;
box-sizing: border-box;
}
#btn{
padding: 10px 20px;
font-size: 16px;
margin: 10px auto;
outline: none;
border: none;
}
#btn.active{
background: linear-gradient(248deg,#9BE15D 0%,#00E3AE 100%);
color: #fff;
}
::-webkit-scrollbar {
z-index: 50;
width: 10px;
height: 3px;
}
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.1);
transition: all .2s;
height: 20px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
:hover::-webkit-scrollbar-thumb {
transition: all .2s;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-corner {
display: none;
}
</style>
- 静态页面
<div class="container">
<div class="modal">
<div class="content">
<h2>产品使用须知</h2>
<ul id="outer">
<li id="inner">
<pre>
尊敬的用户：
感谢您选择我们的产品。为了确保您能够安全、有效地使用本产品，我们特别编写了以下使用须知。
请在使用前仔细阅读，并按照说明进行操作。
1. 安全须知
请在成人监护下使用本产品，避免儿童自行操作。
避免在易燃、易爆环境中使用或存放本产品。
请按照产品说明书中的指导进行操作，不要尝试自行拆解或改装。
2. 安装与调试
在安装产品前，请确保所有配件齐全，且符合产品要求。
安装过程中，请严格按照安装手册的步骤进行，确保各部件连接牢固。
安装完成后，进行必要的调试，确保产品运行平稳。
3. 操作规范
操作产品时，请遵循操作手册中的指导，避免误操作导致产品损坏或影响性能。
请定期检查产品各部件的运行状态，发现异常及时处理。
4. 维护保养
定期对产品进行清洁和保养，保持其良好的工作状态。
清洁产品时，请使用柔软的布料和中性清洁剂，避免使用腐蚀性或磨损性强的清洁工具。
保养时，注意检查产品的电源线、插头等易损部件，确保其完好无损。
5. 电池使用
如果产品使用电池供电，请按照电池说明书的要求正确充电和使用。
避免将电池暴露在高温或潮湿环境中，以免影响电池寿命。
电池电量耗尽时，请及时更换或充电，避免电池过度放电。
6. 故障处理
遇到产品故障时，首先请检查电源、电池等外部因素，排除简单故障。
如果故障无法自行解决，请及时联系我们的客服或专业维修人员，不要自行拆解或修理。
7. 保修与服务
本产品提供有限的保修服务，保修期内如遇非人为损坏的故障，可享受免费维修服务。
保修服务不包括因用户不当操作、私自拆解或改装等原因造成的损坏。
8. 环保与回收
我们倡导环保理念，请您在使用完产品后，按照当地法规进行妥善处理或回收。
请不要随意丢弃废旧产品，以免对环境造成污染。
9. 用户反馈
我们非常重视您的使用体验和建议，欢迎您通过客服渠道向我们反馈使用感受或提出改进建议。
10. 法律声明
本产品使用须知仅供参考，具体使用请以产品说明书和相关法律法规为准。
如有任何疑问或需要帮助，请及时联系我们的客服团队。
感谢您的理解与支持，祝您使用愉快！
客服联系方式
客服电话：[填写电话号码]
客服邮箱：[填写邮箱地址]
官方网站：[填写网站地址]
日期：[填写日期]
</pre>
</li>
</ul>
<button id="btn" disabled>已阅读条款，下一步</button>
</div>
</div>
</div>
- js核心代码
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const modal = document.querySelector('.modal');
const btn = document.getElementById('btn');
let isRead = false
outer.addEventListener('scroll', function(){
if(!isRead){
if(outer.scrollTop >= 295){
// alert('滚动到了最底部');
btn.disabled = false
btn.classList.add('active');
isRead = true;
}
}
})
btn.addEventListener('click', handleClick);
function handleClick(){
modal.style.display = 'none';
}
