如何在纯JavaScript中获得不包括滚动条的视区大小？

在纯JavaScript中获取不包括滚动条的视区大小，可以通过以下几种方法实现：

基础概念

视区（Viewport）：浏览器窗口中用于显示网页内容的区域。
滚动条：当页面内容超出视区时，浏览器会显示滚动条以便用户滚动查看内容。

获取视区大小的方法

方法一：使用 `window.innerWidth` 和 `window.innerHeight`

window.innerWidth 和 window.innerHeight 属性返回浏览器窗口的内部宽度和高度，包括滚动条。

const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
console.log(`Viewport Width: ${viewportWidth}, Height: ${viewportHeight}`);

方法二：使用 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight`

document.documentElement.clientWidth 和 document.documentElement.clientHeight 属性返回文档元素的可见部分的宽度和高度，不包括滚动条。

const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
console.log(`Viewport Width: ${viewportWidth}, Height: ${viewportHeight}`);

方法三：使用 `document.body.clientWidth` 和 `document.body.clientHeight`

在某些情况下，特别是当文档类型声明为 HTML5 时，可以使用 document.body.clientWidth 和 document.body.clientHeight。

const viewportWidth = document.body.clientWidth;
const viewportHeight = document.body.clientHeight;
console.log(`Viewport Width: ${viewportWidth}, Height: ${viewportHeight}`);

应用场景

响应式设计：在开发响应式网页时，需要动态获取视区大小以调整布局。
动画效果：某些动画效果需要根据视区大小进行适配。
弹窗定位：弹窗或提示框需要根据视区大小进行定位，确保不会超出视区范围。

可能遇到的问题及解决方法

问题：在不同浏览器中获取的值不一致

原因：不同浏览器对视区大小的计算方式可能略有不同。 解决方法：使用上述多种方法获取视区大小，并取最小值以确保兼容性。

const viewportWidth = Math.min(
  window.innerWidth,
  document.documentElement.clientWidth,
  document.body.clientWidth
);
const viewportHeight = Math.min(
  window.innerHeight,
  document.documentElement.clientHeight,
  document.body.clientHeight
);
console.log(`Viewport Width: ${viewportWidth}, Height: ${viewportHeight}`);

问题：在页面加载时获取的值不准确

原因：页面加载时，DOM元素可能还未完全渲染。 解决方法：将获取视区大小的代码放在 window.onload 或 DOMContentLoaded 事件中执行。

window.addEventListener('DOMContentLoaded', () => {
  const viewportWidth = document.documentElement.clientWidth;
  const viewportHeight = document.documentElement.clientHeight;
  console.log(`Viewport Width: ${viewportWidth}, Height: ${viewportHeight}`);
});

通过以上方法，可以准确获取不包括滚动条的视区大小，并在不同场景下灵活应用。