我们上网经常看到一些页面层级指示的效果,比如淘宝、京东、百度百科等,用于指示用户浏览页面到哪里了。可以起到很好的交互效果,现在我们就来自己去实现以下类似的效果。主要用到的API是scrollIntoView 和 getBoundingClientRect方法,原理是监听页面滚动元素,当元素距离到浏览器视口一定的位置的时候就证明元素开始出现在页面的视口,就可以标识右边的指示栏。
代码如下:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>H5 canvas绘制框选截图和保存截图代码</title> <style> *{padding:0;margin:0;} #scrollBox{margin:0 auto;width:1000px;} #scrollBox .scroll-tips{position:fixed;right:10px;top:300px;width:100px;} #scrollBox .scroll-tips li {cursor:pointer;text-align:center;} #scrollBox .scroll-tips li.active {background:#ccc;} #scrollBox .ct {height: 550px;line-height:550px;text-align:center;font-size:40px;color:#fff;background:green;} </style> </head> <body> <div id="scrollBox"> <div class="main"> <div class="content"> <h2 id="title1" class="title-bar" data-id="1">标题1</h2> <div class="ct">内容1</div> </div> <div class="content"> <h2 id="title2" class="title-bar" data-id="2">标题2</h2> <div class="ct" style="height:847px;">内容2</div> </div> <div class="content"> <h2 id="title3" class="title-bar" data-id="3">标题3</h2> <div class="ct" style="height:547px;">内容3</div> </div> <div class="content"> <h2 id="title4" class="title-bar" data-id="4">标题4</h2> <div class="ct" style="height:427px;">内容4</div> </div> <div class="content"> <h2 id="title5" class="title-bar" data-id="5">标题5</h2> <div class="ct" style="height:187px;">内容5</div> </div> <div class="content"> <h2 id="title6" class="title-bar" data-id="6">标题6</h2> <div class="ct" style="height:232px;">内容6</div> </div> </div> <div class="scroll-tips"> <ul> <li id="Li1" class="active" data-id="1">标题1</li> <li id="Li2" data-id="2">标题2</li> <li id="Li3" data-id="3">标题3</li> <li id="Li4" data-id="4">标题4</li> <li id="Li5" data-id="5">标题5</li> <li id="Li6" data-id="6">标题6</li> </ul> </div> </div> <script> let Li = $$('.scroll-tips li'); let scrollTips = $$('.title-bar'); function $$(str) { return document.querySelectorAll(str); }; for (let i = 0, len = Li.length; i < len; i++) { // 点击右侧标识点左侧滚动到窗口显示位置 Li[i].onclick = function () { let id = this.getAttribute('data-id'); $$('.scroll-tips li.active')[0].classList.remove('active'); this.classList.add('active'); $$('#title' + id)[0].scrollIntoView(); }; }; // 获取当前页面滚动到浏览器视口顶部位置的元素 const getScrollTop = function (domArr) { for (let i = 0, len = domArr.length; i < len; i++) { let top = domArr[i].getBoundingClientRect().top; // 表示在一定范围内允许的值 if (top >= 0 && top <= 30) { return domArr[i]; } } }; // 监听滚动方法 window.onscroll = function () { let LiId = getScrollTop(scrollTips) && getScrollTop(scrollTips).getAttribute('data-id'); if (LiId) { $$('.scroll-tips li.active')[0].classList.remove('active'); $$('#Li' + LiId)[0].classList.add('active'); } }; </script> </body> </html>
运行结果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 陈慧琳.2002-闪亮每一天新歌+精选2CD【正东】【WAV+CUE】
- 袁培华.1992-有缘【歌林】【WAV+CUE】
- 王瑞霞.1996-是我太软心【名冠】【WAV+CUE】
- 《谭维维 30首经典流行歌曲精选辑 2CD》[WAV/分轨][1.1GB]
- 《赵传 出道三十年全新大碟 你过得还好吗》[WAV/分轨][460MB]
- 《发烧四大天王 磁性男声HiFi发烧碟 2CD》[WAV/分轨][1GB]
- 黑神话悟空上品鼠司空精魄获取方法一览|上品鼠司空精魄收集攻略
- 《真三国无双:起源》新情报将于9月26日公开,实机演示亮相!
- 黑神话悟空上品鼠禁卫精魄获取方法一览|上品鼠禁卫精魄收集攻略
- 优美的旋律至真的情怀《品茶轻音乐·极品典藏Vol.1CD1》[WAV+CUE]
- 曾嵘《峥嵘岁月DSD(试音碟)》WAV+CUE
- 小提琴天碟AlfredoCampoli坎波利-贝多芬D大调小提琴协奏曲与普罗米修斯作品选FLAC
- 博主称本周游戏业内动荡无比:高价PS5 Pro、Xbox裁员等
- 米哈游也搞AI?米哈游AI大模型Glossa完成备案
- G胖变G瘦后:玩家担心其健康状况:如果他出事 游戏业将发生巨变