(三)原生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://www.xdnf.cn/news/1483789.html

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

相关文章

Adobe国际认证详解-影视后期

在当今的数字媒体时代&#xff0c;影视后期制作作为创意产业的核心环节&#xff0c;对于专业技能的要求日益提高。Adobe国际认证&#xff0c;作为全球创意设计领域的重要标杆&#xff0c;为影视后期制作人员提供了一个展示自我、提升技能的国际舞台。 何为影视后期&#xff1f;…

在学习使用LabVIEW的过程中,需要注意哪些问题?

在学习使用LabVIEW的过程中&#xff0c;需要注意以下问题&#xff1a; 1. 基础知识 图形化编程思维&#xff1a; LabVIEW采用图形化编程方式&#xff0c;与传统的文本编程语言有很大不同&#xff0c;需要适应这种新的编程思维方式。数据流概念&#xff1a; 理解LabVIEW的核心数…

【Git标签管理】理解标签 | 创建标签 | 查看标签 | 删除标签 | 推送标签

目录 1.理解标签 2.创建标签 3.查看标签 4.删除本地仓库的标签 5.推送标签 6.删除远程仓库的标签 1.理解标签 Git提供一个打标签的功能tag&#xff0c;对某一次事务/提交的表示&#xff08;作用/意义&#xff09;。标签 tag &#xff0c;可以简单的理解为是对某次 comm…

免费的数字孪生平台助力产业创新,让新质生产力概念有据可依

关于新质生产力的概念&#xff0c;在如今传统企业现代化发展中被反复提及。 那到底什么是新质生产力&#xff1f;它与哪些行业存在联系&#xff0c;我们又该使用什么工具来加快新质生产力的发展呢&#xff1f;今天我将介绍一款为发展新质生产力而量身定做的数字孪生工具。 新…

Ubuntu 24.04 LTS 桌面安装MT4或MT5 (MetaTrader)教程

运行脚本即可在 Ubuntu 24.04 LTS Noble Linux 上轻松安装 MetaTrader 5 或 4 应用程序&#xff0c;使用 WineHQ 进行外汇交易。 MetaTrader 4 (MT4) 或 MetaTrader 5 是用于交易外汇对和商品的流行平台。它支持各种外汇经纪商、内置价格分析工具以及通过专家顾问 (EA) 进行自…

酷炫末世意境背景404单页HTML源码

源码介绍 酷炫末世意境背景404单页HTML源码&#xff0c;背景充满着破坏一切的意境&#xff0c;彷佛末世的到来&#xff0c;可以做网站错误页或者丢失页面&#xff0c;将下面的代码放到空白的HTML里面&#xff0c;然后上传到服务器里面&#xff0c;设置好重定向即可 效果预览 …

PyTorch 深度学习实践-循环神经网络(高级篇)

视频指路 参考博客笔记 参考笔记二 文章目录 上课笔记总代码练习 上课笔记 个人能力有限&#xff0c;重看几遍吧&#xff0c;第一遍基本看不懂 名字的每个字母都是一个特征x1,x2,x3…&#xff0c;一个名字是一个序列 rnn用GRU 用ASCII表作为词典&#xff0c;长度为128&#x…

OceanBase:引领下一代分布式数据库技术的前沿

OceanBase的基本概念 定义和特点 OceanBase是一款由蚂蚁金服开发的分布式关系数据库系统&#xff0c;旨在提供高性能、高可用性和强一致性的数据库服务。它结合了关系数据库和分布式系统的优势&#xff0c;适用于大规模数据处理和高并发业务场景。其核心特点包括&#xff1a; …

源码分析SpringCloud Gateway如何加载断言(predicates)与过滤器(filters)

我们今天的主角是Gateway网关&#xff0c;一听名字就知道它基本的任务就是去分发路由。根据不同的指定名称去请求各个服务&#xff0c;下面是Gateway官方的解释&#xff1a; Spring Cloud Gateway&#xff0c;其他的博主就不多说了&#xff0c;大家多去官网看看&#xff0c;只…

<数据集>蛋壳裂缝检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;2520张 标注数量(xml文件个数)&#xff1a;2520 标注数量(txt文件个数)&#xff1a;2520 标注类别数&#xff1a;2 标注类别名称&#xff1a;[crack, egg] 序号类别名称图片数框数1crack245128352egg25142514 使…

最新 Docker 下载镜像超时解决方案:Docker proxy

现在Docker换源也下载失败太常见了&#xff0c;至于原因&#xff0c;大家懂得都懂。本文提供一种简洁的方案&#xff0c; 利用 Docker 的http-proxy&#xff0c;代理至本机的 proxy。 文章目录 前言Docker proxy 前言 这里默认你会安装 clash&#xff0c;然后有配置和数据库。…

LLM大模型实战项目--基于Stable Diffusion的电商平台虚拟试衣

本文详细讲解LLM大模型实战项目&#xff0c;基于Stable Diffusion的电商平台虚拟试衣 一、项目介绍 二、阿里PAI平台介绍 三、阿里云注册及开通PAI 四、PAI_DSW环境搭建 五、SDLORA模型微调 一、项目介绍 AI虚拟试衣是一种创新的技术&#xff0c;利用人工智能和计算机视觉技…

科技核心~书法用纸结合

书法用纸******对墨迹扩散的影响 传统书法用纸制作****与现代改进 书法用纸的*****表面结构关系研究

ARM架构(二)—— arm v7/v8/v9寄存器介绍

1、ARM v7寄存器 1.1 通用寄存器 V7 V8开始 FIQ个IRQ优先级一样&#xff0c; 通用寄存器&#xff1a;31个 1.2 程序状态寄存器 CPSR是程序状态毒存器&#xff0c;保存条件标志位&#xff0c;中断禁止位&#xff0c;当前处理器模式等控制和状态位。每种异常模式下还存在SPSR&…

网络连接—HTTP

HTTP请求数据 导入http模块 import http from ohos.net.http 使用http模块发送请求&#xff0c;处理响应 创建一个http的请求对象&#xff0c;不可复用 let httpRequest http.createHttp() 发起网络请求 HttpRequest.request(http://localhos t:8080/users, //请求U…

报错:QSqlDatabase: QSQLITE driver not loaded...

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

Unity 导入MRTK,使用URP 升级材质,MRTK的材质还是洋红色

控制台显示信息 ToggleBackground material was not upgraded. There’s no upgrader to convert Mixed Reality Toolkit/Standard shader to selected pipeline UnityEditor.Rendering.Universal.UniversalRenderPipelineMaterialUpgrader:UpgradeProjectMaterials() (at 点击…

Linux系统学习日记——vim操作手册

Vim编辑器是linux下的一个命令行编辑器&#xff0c;类似于我们windows下的记事本。 目录 打开文件 编辑 保存退出 打开文件 打开 hello.c不存在也可以打开&#xff0c;保存时vim会自动创建。 效果 Vim打开时&#xff0c;处于命令模式&#xff0c;即执行命令的模式&#x…

Hadoop-38 Redis 高并发下的分布式缓存 Redis简介 缓存场景 读写模式 旁路模式 穿透模式 缓存模式 基本概念等

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; HadoopHDFSMapReduceHiveFlumeSqoopZookeeperHBaseRedis 章节内容 上一节我们完成了&#xff1a; HBase …

在国产芯片上实现YOLOv5/v8图像AI识别-【1.3】YOLOv5的介绍及使用(训练、导出)更多内容见视频

本专栏主要是提供一种国产化图像识别的解决方案&#xff0c;专栏中实现了YOLOv5/v8在国产化芯片上的使用部署&#xff0c;并可以实现网页端实时查看。根据自己的具体需求可以直接产品化部署使用。 B站配套视频&#xff1a;https://www.bilibili.com/video/BV1or421T74f 数据…