(三)原生js案例之滚动到底部解锁按钮状态

业务主要是注册页面,有很长的条款需要用户去读,必须确认用户是不是看到全部的条款,这个场景下可以使用

效果

请添加图片描述

代码实现

  • 必要的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';}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3250523.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

kotlin compose 实现应用内多语言切换(不重新打开App)

1. 示例图 2.具体实现 如何实现上述示例,且不需要重新打开App ①自定义 MainApplication 实现 Application ,定义两个变量: class MainApplication : Application() { object GlobalDpData { var language: String = "" var defaultLanguage: Strin…

DA-SVM多变量分类预测|蜻蜓优化算法-支持向量机|Matalb

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、原理介绍&#xff1a; 四、完整程序下载&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matlab平台编译&a…

【LeetCode】十四、回溯法:括号生成 + 子集

文章目录 1、回溯法2、leetcode22&#xff1a;括号生成3、leetcode78&#xff1a;子集 1、回溯法 使用场景&#xff0c;如找[1&#xff0c;2&#xff0c;3]的所有子集&#xff1a; 2、leetcode22&#xff1a;括号生成 以n2为例&#xff0c;即两个左括号、两个右括号&#xff0c…

小白操作Typora快捷键操作day01

小白操作Typora快捷键操作day01 一、标题 建议先写标题内容&#xff0c;然后不需要选中直接Ctrl1~6对应所需要的标题&#xff0c;然后回车 ctrl""级别增加 ctrl1~6对应级别的标题&#xff08;ctrl0是普通文本&#xff09; 二、段落 1、换行 笑呵呵&#xff08…

科技论文在线--适合练习期刊写作和快速发表科技成果论文投稿网站

中国科技论文在线这个平台可以作为练手的一个渠道&#xff0c;至少可以锻炼一下中文写作&#xff0c;或者写一些科研方向的简单综述性文章。当然&#xff0c;如果你的老师期末要求也是交一份科技论文在线的刊载证明的话&#xff0c;这篇文章可以给你提供一些经验。 中国科技论…

政安晨【零基础玩转各类开源AI项目】基于Ubuntu系统部署Hallo :针对肖像图像动画的分层音频驱动视觉合成

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 零基础玩转各类开源AI项目 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 本文目标&#xff1a;在Ubuntu系统上部署Hallo&#x…

高频面试题-CSS

BFC 介绍下BFC (块级格式化上下文) 1>什么是BFC BFC即块级格式化上下文&#xff0c;是CSS可视化渲染的一部分, 它是一块独立的渲染区域&#xff0c;只有属于同一个BFC的元素才会互相影响&#xff0c;且不会影响其它外部元素。 2>如何创建BFC 根元素&#xff0c;即HTM…

【好玩的经典游戏】Docker环境下部署赛车小游戏

【好玩的经典游戏】Docker环境下部署赛车小游戏 一、小游戏介绍1.1 小游戏简介1.2 项目预览二、本次实践介绍2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 安装Docker环境3.2 检查Docker服务状态3.3 检查Docker版本3.4 检查docker compose 版本四、构建容器镜像4.1 下…

基于springboot新生宿舍管理系统

系统背景 在当今高等教育日益普及的时代背景下&#xff0c;高校作为知识传播与创新的重要基地&#xff0c;其基础设施的智能化管理显得尤为重要。新生宿舍作为大学生活的起点&#xff0c;不仅是学生日常生活与学习的重要场所&#xff0c;也是培养学生独立生活能力和团队合作精神…

IP溯源工具--IPTraceabilityTool

工具地址&#xff1a;xingyunsec/IPTraceabilityTool: 蓝队值守利器-IP溯源工具 (github.com) 工具介绍&#xff1a; 在攻防演练期间&#xff0c;对于值守人员&#xff0c;某些客户要求对攻击IP都进行分析溯源&#xff0c;发现攻击IP的时候&#xff0c;需要针对攻击IP进行分析…

【electron6】浏览器实时播放PCM数据

pcm介绍&#xff1a;PCM&#xff08;Puls Code Modulation&#xff09;全称脉码调制录音&#xff0c;PCM录音就是将声音的模拟信号表示成0,1标识的数字信号&#xff0c;未经任何编码和压缩处理&#xff0c;所以可以认为PCM是未经压缩的音频原始格式。PCM格式文件中不包含头部信…

单片机程序设计模式

RTOS:多任务拆分交叉执行 Q:状态机和多任务模式有什么区别 Q:任务创建和任务调度器是什么&#xff1f; 裸机程序的设计模式可以分为&#xff1a;轮询、前后台、定时器驱动、基于状态机。前面三种方 法都无法解决一个问题&#xff1a;假设有 A、B 两个都很耗时的函数&#xf…

基于牛顿-拉夫逊优化算法(Newton-Raphson-based optimizer, NBRO)的无人机三维路径规划

牛顿-拉夫逊优化算法(Newton-Raphson-based optimizer, NBRO)是一种新型的元启发式算法&#xff08;智能优化算法&#xff09;&#xff0c;该成果由Sowmya等人于2024年2月发表在中科院2区Top SCI期刊《Engineering Applications of Artificial Intelligence》上。 1、算法原理…

前端开发_注意事项

无论使用哪种框架开发&#xff08;vue、react、...&#xff09;&#xff0c;前端开发终究是结构&#xff08;HTML&#xff09;、样式&#xff08;CSS&#xff09;、逻辑&#xff08;用户操作数据处理对接后端API&#xff09;。那么开发过程中都需要注意哪些事项&#xff0c;本文…

VScode:前端项目中yarn包的安装和使用

一、首先打开PowerShell-管理员身份运行ISE 输入命令&#xff1a; set-ExecutionPolicy RemoteSigned 选择“全是”&#xff0c;表示允许在本地计算机上运行由本地用户创建的脚本&#xff0c;没有报错就行了 二、接着打开VScode集成终端&#xff0c;安装yarn插件 输入 npm ins…

新版本 idea 创建不了 spring boot 2 【没有jkd8选项】

创建新项目 将地址换成如下 https://start.aliyun.com/

vue this.$refs 动态拼接

业务需要&#xff0c;refs是不固定的 <vxe-grid refgridWarehouse v-bind"gridWarehouseOptions" v-if"tableHeight" :height"tableHeight":expand-config"{iconOpen: vxe-icon-square-minus, iconClose: vxe-icon-square-plus}"c…

Filebeat k8s 部署(Deployment)采集 PVC 日志发送至 Kafka——日志处理(二)

文章目录 前言Filebeat Configmap 配置Filebeat Deployment验证总结 前言 在上篇文章中总结了 Django 日志控制台输出、文件写入按天拆分文件&#xff0c;自定义 Filter 增加 trace_id 以及过滤——日志处理&#xff08;一)&#xff0c;将日志以 JSON 格式写入日志文件。我们的…

object-C 解答算法:移动零(leetCode-283)

移动零(leetCode-283) 题目如下图:(也可以到leetCode上看完整题目,题号283) 解题思路: 本质就是把非0的元素往前移动,接下来要考虑的是怎么移动,每次移动多少? 这里需要用到双指针,i 记录每次遍历的元素值, j 记录“非0元素值”需要移动到的位置; 当所有“非0元素值”都移…

【IC前端虚拟项目】reference model编写与合入

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 本来按照规划,这一篇应该写ral model的生成与合入,不过因为前面在这一篇文章中已经介绍了mvu的寄存器体系: 【IC前端虚拟项目】MVU寄存器文档编写与RTL代码生成-CSDN博客文章浏览阅读209次。那可就多…