html实现滚动革新

打印 上一主题 下一主题

主题 1031|帖子 1031|积分 3093

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         .news {
  9.             width: 500px;
  10.             height: 100px;
  11.             border: 1px solid black;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="news">1</div>
  17.     <div class="news">2</div>
  18.     <div class="news">3</div>
  19.     <div class="news">4</div>
  20.     <div class="news">5</div>
  21.     <div class="news">6</div>
  22.     <div class="news">7</div>
  23.     <div class="news">8</div>
  24.     <div class="news">9</div>
  25.     <div class="news">10</div>
  26.     <div class="news">11</div>
  27.     <div class="news">12</div>
  28.     <script>
  29.         document.addEventListener('scroll', function() {
  30.             if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
  31.                 // 刷新数据
  32.                 console.log('刷新数据');
  33.                 window.scrollTo(0, 100);
  34.             }
  35.         });
  36.     </script>
  37. </body>
  38. </html>
复制代码
window.scrollTo第二个参数是document左上角到欣赏器窗口左上角的垂直距离。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

河曲智叟

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表