业务主要是注册页面,有很长的条款需要用户去读,必须确认用户是不是看到全部的条款,这个场景下可以使用
效果
代码实现
- 必要的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 = falseouter.addEventListener('scroll', function(){if(!isRead){if(outer.scrollTop >= 295){// alert('滚动到了最底部');btn.disabled = falsebtn.classList.add('active');isRead = true;}}})btn.addEventListener('click', handleClick);function handleClick(){modal.style.display = 'none';}