scroll事件及其应用

tech2024-10-21 5

scroll事件及其应用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul li { height: 600px; border: 1px solid #ccc; list-style: none; } .header { height: 500px; background-color: red; } ol { list-style: none; width: 700px; display: flex; margin: 0 auto; position: sticky; top: 0; text-align: center; } ol li { flex: 1; cursor: pointer; } .backTop { position: fixed; right: 120px; bottom: 120px; padding: 20px; border: 1px solid #ccc; cursor: pointer; } </style> </head> <body> <div class="header"></div> <ol> <li><a>去1层</a></li> <li><a>去2层</a></li> <li><a>去3层</a></li> <li><a>去4层</a></li> <li><a>去5层</a></li> <li><a>去6层</a></li> <li><a>去7层</a></li> <li><a>去8层</a></li> <li><a>去9层</a></li> <li><a>去10层</a></li> <li><a>去11层</a></li> <li><a>去12层</a></li> </ol> <ul> <li>1层</li> <li>2层</li> <li>3层</li> <li>4层</li> <li>5层</li> <li>6层</li> <li>7层</li> <li>8层</li> <li>9层</li> <li>10层</li> <li>11层</li> <li>12层</li> </ul> <div id="backTop" class="backTop">回到顶部</div> <script> var backTop = document.querySelector("#backTop") //获取页面的高度 var pageHeight = document.body.clientHeight //获取视口高度 let clientHeight = document.documentElement.clientHeight; let timer = null; //scroll 事件当页面卷动值发送变化的时候触发 document.onscroll = function() { // console.log(1111); //兼容IE浏览器 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // console.log(pageHeight - clientHeight - scrollTop); //判断是否滚动到页面底部了 if (pageHeight - clientHeight - scrollTop < 300) { clearTimeout(timer); //为了不让浏览器频繁触发一个已经设置完成的事件 timer = setTimeout(function() { console.log(1); backTop.style.display = 'block' }, 1000) //节流模式 } else { backTop.style.display = 'none' } } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul li { height: 600px; border: 1px solid #ccc; list-style: none; } .header { height: 500px; background-color: red; } ol { list-style: none; width: 1200px; display: flex; margin: 0 auto; position: sticky; top: 0; text-align: center; } ol li { flex: 1; cursor: pointer; } </style> </head> <body> <div class="header"></div> <ol> <li><a>去1层</a></li> <li><a>去2层</a></li> <li><a>去3层</a></li> <li><a>去4层</a></li> <li><a>去5层</a></li> <li><a>去6层</a></li> <li><a>去7层</a></li> <li><a>去8层</a></li> <li><a>去9层</a></li> <li><a>去10层</a></li> <li><a>去11层</a></li> <li><a>去12层</a></li> </ol> <ul> <li>1层</li> <li>2层</li> <li>3层</li> <li>4层</li> <li>5层</li> <li>6层</li> <li>7层</li> <li>8层</li> <li>9层</li> <li>10层</li> <li>11层</li> <li>12层</li> </ul> <script> //scrollTop 获取页面的卷动值(滚动值) //document.documentElement.scrollTop||document.body.scrollTop // setTimeout(function() { // //如果要设置请两条分开书写 // document.documentElement.scrollTop = 4000; // document.body.scrollTop = 4000; // }, 3000) //获取的所有a标签 //将伪数组转化为数组以便使用数组的方法 let arr = Array.from(document.querySelectorAll("a")); arr.forEach(function(value, index) { value.onclick = function() { // console.log(index); document.documentElement.scrollTop = 500 + 21 + index * 602 } }) </script> </body> </html>

最新回复(0)