MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript处理文档几何与滚动的策略

2021-12-255.4k 阅读

文档几何基础

在JavaScript中处理文档几何，首先要理解一些基本概念。文档的几何信息涉及到元素在页面中的位置、大小等属性。这些属性对于实现诸如动画效果、响应式布局以及与用户交互相关的功能至关重要。

元素的大小属性

  1. clientWidth 和 clientHeight
    • clientWidth 和 clientHeight 用于获取元素内部的宽度和高度，包括元素的内边距（padding），但不包括边框（border）和滚动条（如果存在）。例如，对于一个具有固定宽度和高度且有内边距的 <div> 元素：
    <style>
  #testDiv {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid black;
  }
</style>
<div id="testDiv"></div>
<script>
  const div = document.getElementById('testDiv');
  console.log('clientWidth:', div.clientWidth);
  console.log('clientHeight:', div.clientHeight);
</script>
    在上述代码中，clientWidth 和 clientHeight 的值将是 240（200 + 20 + 20，即设置的宽度/高度加上两边的内边距）。
  2. offsetWidth 和 offsetHeight
    • offsetWidth 和 offsetHeight 获取元素的布局宽度和高度，包括元素的边框、内边距以及滚动条（如果存在）。继续以上面的 <div> 元素为例：
    <style>
  #testDiv {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid black;
  }
</style>
<div id="testDiv"></div>
<script>
  const div = document.getElementById('testDiv');
  console.log('offsetWidth:', div.offsetWidth);
  console.log('offsetHeight:', div.offsetHeight);
</script>
    这里 offsetWidth 和 offsetHeight 的值将是 260（200 + 20 + 20 + 10 + 10，即设置的宽度/高度加上内边距和边框）。
  3. scrollWidth 和 scrollHeight
    • scrollWidth 和 scrollHeight 表示元素的完整宽度和高度，包括由于溢出而在屏幕上不可见的部分。如果一个 <div> 元素有内容超出了其设定的尺寸：
    <style>
  #testDiv {
    width: 200px;
    height: 200px;
    overflow: auto;
    padding: 20px;
  }
  #content {
    width: 400px;
    height: 400px;
  }
</style>
<div id="testDiv">
  <div id="content"></div>
</div>
<script>
  const div = document.getElementById('testDiv');
  console.log('scrollWidth:', div.scrollWidth);
  console.log('scrollHeight:', div.scrollHeight);
</script>
    在这种情况下，scrollWidth 和 scrollHeight 的值将是 440（400 + 20 + 20，即内部元素的宽度/高度加上 <div> 的内边距），因为即使部分内容不可见，scrollWidth 和 scrollHeight 也会包含全部内容的尺寸。

元素的位置属性

  1. offsetTop 和 offsetLeft
    • offsetTop 是当前元素相对于其定位父元素（offsetParent）顶部边缘的距离，offsetLeft 是相对于其定位父元素左侧边缘的距离。定位父元素是指第一个具有 position 值为 relative、absolute 或 fixed 的祖先元素。如果没有这样的祖先元素，则相对于文档的 body 元素。例如：
    <style>
  #parent {
    position: relative;
    width: 300px;
    height: 300px;
    padding: 20px;
  }
  #child {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
  }
</style>
<div id="parent">
  <div id="child"></div>
</div>
<script>
  const child = document.getElementById('child');
  console.log('offsetTop:', child.offsetTop);
  console.log('offsetLeft:', child.offsetLeft);
</script>
    这里 offsetTop 和 offsetLeft 的值将是 50，因为子元素相对于父元素的定位是 top: 50px 和 left: 50px。
  2. clientTop 和 clientLeft
    • clientTop 表示元素上边框的宽度，clientLeft 表示元素左边框的宽度。如果元素没有边框，这两个值通常为 0。例如：
    <style>
  #testDiv {
    border: 10px solid black;
    padding: 20px;
  }
</style>
<div id="testDiv"></div>
<script>
  const div = document.getElementById('testDiv');
  console.log('clientTop:', div.clientTop);
  console.log('clientLeft:', div.clientLeft);
</script>
    这里 clientTop 和 clientLeft 的值将是 10，即边框的宽度。
  3. scrollTop 和 scrollLeft
    • scrollTop 表示元素滚动条到元素顶部的距离，scrollLeft 表示元素滚动条到元素左侧的距离。对于可滚动的元素，可以通过修改这两个属性来控制滚动位置。例如，对于一个具有溢出内容的 <div> 元素：
    <style>
  #testDiv {
    width: 200px;
    height: 200px;
    overflow: auto;
    padding: 20px;
  }
  #content {
    width: 400px;
    height: 400px;
  }
</style>
<div id="testDiv">
  <div id="content"></div>
</div>
<script>
  const div = document.getElementById('testDiv');
  // 滚动到一定位置
  div.scrollTop = 100;
  div.scrollLeft = 100;
  console.log('scrollTop:', div.scrollTop);
  console.log('scrollLeft:', div.scrollLeft);
</script>
    在上述代码中，将 scrollTop 和 scrollLeft 设置为 100，然后输出它们的值以验证设置。

窗口和文档的几何

除了元素的几何属性，窗口和整个文档的几何信息在JavaScript编程中也非常重要。这些信息对于实现页面级别的布局、响应式设计以及与用户滚动操作相关的功能起着关键作用。

窗口的几何属性

  1. window.innerWidth 和 window.innerHeight
    • window.innerWidth 返回浏览器窗口的内部宽度，包括垂直滚动条（如果存在）的宽度。window.innerHeight 返回浏览器窗口的内部高度，包括水平滚动条（如果存在）的高度。例如，可以通过以下代码获取窗口的内部尺寸：
    <script>
  console.log('innerWidth:', window.innerWidth);
  console.log('innerHeight:', window.innerHeight);
</script>
    这些值会随着窗口大小的改变而动态变化，可以通过添加 resize 事件监听器来实时监测窗口尺寸的变化： 
    <script>
  window.addEventListener('resize', function () {
    console.log('innerWidth:', window.innerWidth);
    console.log('innerHeight:', window.innerHeight);
  });
</script>
  2. window.outerWidth 和 window.outerHeight
    • window.outerWidth 返回整个浏览器窗口的宽度，包括侧边栏、窗口镶边和窗口调正边框（如果存在）。window.outerHeight 返回整个浏览器窗口的高度，包括标题栏和窗口调正边框（如果存在）。例如：
    <script>
  console.log('outerWidth:', window.outerWidth);
  console.log('outerHeight:', window.outerHeight);
</script>
    与 innerWidth 和 innerHeight 不同，outerWidth 和 outerHeight 通常不会因为用户在窗口内的操作（如滚动条的显示或隐藏）而改变，除非整个浏览器窗口的大小发生变化。

文档的几何属性

  1. document.documentElement.clientWidth 和 document.documentElement.clientHeight
    • 在标准模式下（DOCTYPE 声明正确），document.documentElement.clientWidth 返回文档的可见宽度，document.documentElement.clientHeight 返回文档的可见高度。这两个属性包括滚动条（如果存在）的空间。例如：
    <script>
  console.log('documentElement.clientWidth:', document.documentElement.clientWidth);
  console.log('documentElement.clientHeight:', document.documentElement.clientHeight);
</script>
    在怪异模式下（没有正确的 DOCTYPE 声明），需要使用 document.body.clientWidth 和 document.body.clientHeight 来获取类似的信息，但为了兼容性，通常建议使用 document.documentElement 的相关属性。
  2. document.documentElement.scrollWidth 和 document.documentElement.scrollHeight
    • document.documentElement.scrollWidth 返回文档的完整宽度，包括由于溢出而在屏幕上不可见的部分。document.documentElement.scrollHeight 返回文档的完整高度，同样包括不可见部分。例如，当文档内容超出窗口大小时：
    <style>
  body {
    min-height: 1000px;
  }
</style>
<script>
  console.log('documentElement.scrollWidth:', document.documentElement.scrollWidth);
  console.log('documentElement.scrollHeight:', document.documentElement.scrollHeight);
</script>
    这里 scrollWidth 和 scrollHeight 将反映文档的实际完整尺寸，而不仅仅是可见部分的尺寸。

处理文档滚动

文档滚动是网页交互中常见的功能，JavaScript提供了多种方式来处理文档的滚动操作，包括监听滚动事件、控制滚动位置等。

监听滚动事件

  1. window.onscroll 事件
    • 可以通过 window.onscroll 来监听整个窗口的滚动事件。例如，当窗口滚动时，在控制台输出滚动条的位置：
    <script>
  window.onscroll = function () {
    console.log('scrollTop:', window.pageYOffset);
    console.log('scrollLeft:', window.pageXOffset);
  };
</script>
    在现代JavaScript中，更推荐使用 addEventListener 来添加滚动事件监听器，这样可以添加多个监听器而不会覆盖之前的设置： 
    <script>
  window.addEventListener('scroll', function () {
    console.log('scrollTop:', window.pageYOffset);
    console.log('scrollLeft:', window.pageXOffset);
  });
</script>
  2. 元素的滚动事件
    • 对于具有 overflow: auto 或 overflow: scroll 样式的元素，也可以监听其滚动事件。例如，对于一个可滚动的 <div> 元素：
    <style>
  #testDiv {
    width: 200px;
    height: 200px;
    overflow: auto;
  }
  #content {
    width: 400px;
    height: 400px;
  }
</style>
<div id="testDiv">
  <div id="content"></div>
</div>
<script>
  const div = document.getElementById('testDiv');
  div.addEventListener('scroll', function () {
    console.log('div scrollTop:', div.scrollTop);
    console.log('div scrollLeft:', div.scrollLeft);
  });
</script>
    这样，当用户滚动 <div> 元素内的内容时，就会触发相应的事件并输出滚动位置。

控制滚动位置

  1. 使用 scrollTo 方法
    • window.scrollTo(x, y) 方法可以将窗口滚动到指定的坐标位置。x 表示水平方向的坐标，y 表示垂直方向的坐标。例如，将窗口滚动到页面底部：
    <script>
  function scrollToBottom() {
    window.scrollTo(0, document.documentElement.scrollHeight);
  }
  // 可以通过按钮等方式触发这个函数
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.createElement('button');
    button.textContent = 'Scroll to Bottom';
    button.addEventListener('click', scrollToBottom);
    document.body.appendChild(button);
  });
</script>
    对于元素，也有类似的 element.scrollTo(x, y) 方法。例如，将一个可滚动的 <div> 元素滚动到特定位置： 
    <style>
  #testDiv {
    width: 200px;
    height: 200px;
    overflow: auto;
  }
  #content {
    width: 400px;
    height: 400px;
  }
</style>
<div id="testDiv">
  <div id="content"></div>
</div>
<script>
  const div = document.getElementById('testDiv');
  function scrollDivToPosition() {
    div.scrollTo(100, 100);
  }
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.createElement('button');
    button.textContent = 'Scroll Div';
    button.addEventListener('click', scrollDivToPosition);
    document.body.appendChild(button);
  });
</script>
  2. 使用 scrollBy 方法
    • window.scrollBy(x, y) 方法将窗口相对于当前位置滚动指定的偏移量。x 为水平偏移量，y 为垂直偏移量。例如，每次点击按钮将窗口向下滚动 100 像素：
    <script>
  function scrollDown() {
    window.scrollBy(0, 100);
  }
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.createElement('button');
    button.textContent = 'Scroll Down';
    button.addEventListener('click', scrollDown);
    document.body.appendChild(button);
  });
</script>
    同样，元素也有 element.scrollBy(x, y) 方法，用于相对当前位置滚动元素内的内容。

平滑滚动

  1. 使用 scrollIntoView 方法
    • element.scrollIntoView() 方法可以将指定元素滚动到浏览器窗口的可见区域内。默认情况下，元素的顶部会与窗口顶部对齐。例如，有一个页面包含多个段落，点击一个按钮使某个段落滚动到可见区域：
    <p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<button id="scrollButton">Scroll to Paragraph 2</button>
<script>
  const scrollButton = document.getElementById('scrollButton');
  const p2 = document.getElementById('p2');
  scrollButton.addEventListener('click', function () {
    p2.scrollIntoView();
  });
</script>
    可以通过传递一个对象参数来控制滚动的行为，例如 { behavior: "smooth", block: "center" } 可以实现平滑滚动并将元素居中显示： 
    <p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<button id="scrollButton">Scroll to Paragraph 2</button>
<script>
  const scrollButton = document.getElementById('scrollButton');
  const p2 = document.getElementById('p2');
  scrollButton.addEventListener('click', function () {
    p2.scrollIntoView({ behavior: "smooth", block: "center" });
  });
</script>
  2. 自定义平滑滚动动画
    • 通过结合 requestAnimationFrame 和逐步调整 scrollTop 或 scrollLeft 的值，可以实现自定义的平滑滚动动画。例如，以下代码实现了一个平滑滚动到指定位置的函数：
    <script>
  function smoothScrollTo(targetY, duration = 1000) {
    const startY = window.pageYOffset;
    const startTime = performance.now();
    const easeInOutQuad = function (t, b, c, d) {
      t /= d / 2;
      if (t < 1) return c / 2 * t * t + b;
      t--;
      return -c / 2 * (t * (t - 2) - 1) + b;
    };
    const step = function (timestamp) {
      const elapsed = timestamp - startTime;
      const progress = Math.min(elapsed / duration, 1);
      window.scrollTo(0, easeInOutQuad(progress, startY, targetY - startY, duration));
      if (progress < 1) {
        requestAnimationFrame(step);
      }
    };
    requestAnimationFrame(step);
  }
  // 可以通过按钮等方式触发这个函数
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.createElement('button');
    button.textContent = 'Smooth Scroll to Bottom';
    button.addEventListener('click', function () {
      smoothScrollTo(document.documentElement.scrollHeight);
    });
    document.body.appendChild(button);
  });
</script>
    在上述代码中，smoothScrollTo 函数通过 requestAnimationFrame 不断更新滚动位置，使用 easeInOutQuad 函数实现了缓动效果，使得滚动更加平滑。

基于文档几何和滚动的应用场景

了解了文档几何和滚动的相关知识后，我们可以将这些技术应用到各种实际场景中，提升用户体验和实现复杂的交互功能。

导航栏固定与滚动效果

  1. 导航栏固定
    • 当页面滚动到一定位置时，将导航栏固定在页面顶部是常见的需求。可以通过监听窗口的滚动事件，根据滚动位置来改变导航栏的 position 属性。例如：
    <style>
  nav {
    background-color: lightblue;
    height: 50px;
    width: 100%;
    position: relative;
  }
  nav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
</style>
<nav id="mainNav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>
<div style="height: 2000px; background-color: lightgray;">
  <!-- 模拟长页面内容 -->
</div>
<script>
  const nav = document.getElementById('mainNav');
  window.addEventListener('scroll', function () {
    if (window.pageYOffset > 100) {
      nav.classList.add('fixed');
    } else {
      nav.classList.remove('fixed');
    }
  });
</script>
    在上述代码中，当窗口滚动距离大于 100 像素时，给导航栏添加 fixed 类，使其固定在页面顶部，并添加阴影效果。
  2. 导航栏滚动激活效果
    • 根据页面滚动位置，自动激活相应的导航栏链接也是一种常见的交互效果。可以通过计算文档的滚动高度和各部分内容的位置来实现。例如，假设有一个页面包含多个章节：
    <style>
  nav {
    background-color: lightblue;
    height: 50px;
    width: 100%;
  }
  nav a {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    color: black;
  }
  nav a.active {
    color: red;
  }
  section {
    height: 1000px;
    border-bottom: 1px solid gray;
  }
</style>
<nav id="mainNav">
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
  <a href="#section3">Section 3</a>
</nav>
<section id="section1"></section>
<section id="section2"></section>
<section id="section3"></section>
<script>
  const navLinks = document.querySelectorAll('nav a');
  const sections = document.querySelectorAll('section');
  window.addEventListener('scroll', function () {
    const scrollTop = window.pageYOffset;
    sections.forEach((section, index) => {
      if (scrollTop >= section.offsetTop - 50 && scrollTop < section.offsetTop + section.offsetHeight - 50) {
        navLinks.forEach(link => link.classList.remove('active'));
        navLinks[index].classList.add('active');
      }
    });
  });
</script>
    在上述代码中，通过监听滚动事件，根据滚动位置判断当前可见的章节，然后激活相应的导航栏链接。

图片懒加载

  1. 基于文档几何的懒加载原理
    • 图片懒加载是指在图片进入浏览器窗口的可见区域时才加载图片，这样可以提高页面的加载性能，尤其是对于包含大量图片的页面。其原理是通过比较图片的位置与窗口的几何信息来判断图片是否即将进入可见区域。
  2. 实现图片懒加载
    • 以下是一个简单的图片懒加载实现示例。首先，在HTML中使用 data - src 属性来存储图片的真实路径，而 src 属性可以设置为一个占位图片（例如一个透明的1x1像素图片）：
    <style>
  img.lazy {
    width: 300px;
    height: 200px;
    background - color: lightgray;
  }
</style>
<img class="lazy" data - src="real - image1.jpg" src="placeholder.jpg">
<img class="lazy" data - src="real - image2.jpg" src="placeholder.jpg">
<img class="lazy" data - src="real - image3.jpg" src="placeholder.jpg">
<script>
  const lazyImages = document.querySelectorAll('img.lazy');
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  lazyImages.forEach(image => {
    observer.observe(image);
  });
</script>
    在上述代码中，使用 IntersectionObserver 来观察图片元素与视口的相交情况。当图片进入视口（isIntersecting 为 true）时，将 src 属性设置为 data - src 中的真实图片路径，并停止观察该图片。如果不支持 IntersectionObserver，也可以通过监听窗口的滚动事件，手动计算图片位置与窗口位置的关系来实现懒加载： 
    <style>
  img.lazy {
    width: 300px;
    height: 200px;
    background - color: lightgray;
  }
</style>
<img class="lazy" data - src="real - image1.jpg" src="placeholder.jpg">
<img class="lazy" data - src="real - image2.jpg" src="placeholder.jpg">
<img class="lazy" data - src="real - image3.jpg" src="placeholder.jpg">
<script>
  const lazyImages = document.querySelectorAll('img.lazy');
  window.addEventListener('scroll', function () {
    lazyImages.forEach(image => {
      const rect = image.getBoundingClientRect();
      if (rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
        image.src = image.dataset.src;
        window.removeEventListener('scroll', arguments.callee);
      }
    });
  });
</script>
    这里通过 getBoundingClientRect 方法获取图片相对于视口的位置，当图片完全在视口内时，加载真实图片并移除滚动事件监听器（避免重复加载）。

无限滚动

  1. 无限滚动的原理
    • 无限滚动是指当用户滚动到页面底部时，自动加载更多内容的技术。其原理是通过监听滚动事件，当滚动到页面底部一定距离时，触发加载更多内容的操作。
  2. 实现无限滚动
    • 以下是一个简单的无限滚动示例。假设页面有一个包含内容的 <div>，当滚动到该 <div> 底部一定距离时，通过AJAX请求加载更多内容：
    <style>
  #content {
    min - height: 1000px;
  }
</style>
<div id="content">
  <!-- 初始内容 -->
</div>
<script>
  const contentDiv = document.getElementById('content');
  window.addEventListener('scroll', function () {
    const rect = contentDiv.getBoundingClientRect();
    if (rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + 100) {
      // 模拟AJAX请求加载更多内容
      const newContent = document.createElement('p');
      newContent.textContent = 'New content loaded';
      contentDiv.appendChild(newContent);
    }
  });
</script>
    在上述代码中，通过 getBoundingClientRect 方法获取内容 <div> 相对于视口的位置，当内容 <div> 的底部距离视口底部小于等于 100 像素时，模拟加载更多内容（这里只是简单创建一个新的段落添加到内容区域）。在实际应用中，可以使用 fetch 等方法进行真实的AJAX请求来获取新的数据并更新页面。

通过深入理解和运用JavaScript处理文档几何与滚动的策略，我们能够创建出更加流畅、高效且具有丰富交互性的网页应用。无论是简单的导航栏效果，还是复杂的无限滚动和图片懒加载功能，这些技术都为前端开发提供了强大的支持。