来自张鑫旭2019-01-26 DOM 小测第 27 期 - 图1前端小测

题目

2019-01-26 DOM 小测第 27 期 - 图2

答案

  1. <!doctype html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1">
  7.     <title>不同滚动容器与滚动高度获取测试</title>
  8.     <style>
  9.         .result {
  10.             position: fixed;
  11.             pointer-events: none;
  12.             /* 不会触发鼠标事件 */
  13.             top: 0;
  14.             left: 0;
  15.             right: 0;
  16.             padding: 8px;
  17.             font-size: 12px;
  18.             max-height: 100vh;
  19.             white-space: pre-wrap;
  20.             /* 
  21.         连续的空白符会被保留。
  22.         在遇到换行符或者<br>元素，或者需要为了填充「行框盒子」时才会换行。
  23.       */
  24.             overflow: hidden;
  25.         }
  26.     </style>
  27. </head>
  29. <body>
  30.     <div style="height:4000px;"></div>
  31.     <div id="result" class="result">默认</div>
  32.     <script>
  33.         var result = window.document.getElementById('result');
  34.         var logs = '';
  35.     // window
  36.         window.addEventListener('scroll', function () {
  37.             // 浏览器窗体滚动高度
  38.             var winScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  39.             // 浏览器窗体高度
  40.             var winHeight = window.innerHeight || document.documentElement.clientHeight;
  41.             if (winScrollTop > winHeight) {
  42.                 result.innerHTML = '返回顶部↑';
  43.             }
  44.             if (winScrollTop <= winHeight) {
  45.                 result.innerHTML = '默认';
  46.             }
  47.         });
  48.     // 普通元素
  49.     dom.addEventListener('scroll', function () {
  50.             // 普通元素滚动高度
  51.             var winScrollTop = dom.scrollTop;
  52.             // 普通元素高度
  53.             var winHeight = dom.clientHeight;
  54.             if (winScrollTop > winHeight) {
  55.                 result.innerHTML = '返回顶部↑';
  56.             }
  57.             if (winScrollTop <= winHeight) {
  58.                 result.innerHTML = '默认';
  59.             }
  60.         });
  61.     </script>
  62. </body>
  64. </html>