如何获取Electron应用尺寸以动态启用CSS overflow滚动条？

嘿，这个需求我之前做Electron项目时刚好碰到过，其实获取应用窗口尺寸的方法挺直接的，我给你详细说说怎么实现：

在Electron里，你主要通过BrowserWindow模块来获取窗口相关尺寸，分两种场景：

1. 获取窗口整体尺寸（含标题栏、边框） #

如果需要包含窗口的所有装饰部分，用getSize()方法，它会返回一个[宽度, 高度]的数组：

const { BrowserWindow } = require('electron');
const mainWindow = new BrowserWindow();

// 获取窗口整体宽高
const [windowTotalWidth, windowTotalHeight] = mainWindow.getSize();
console.log(`窗口整体：宽${windowTotalWidth}px，高${windowTotalHeight}px`);

2. 获取内容区域尺寸（仅网页渲染区） #

要是你想对比的是网页实际可显示的空间，那getContentSize()更准确，它返回的是窗口内去掉标题栏、边框后的内容宽高：

const [contentWidth, contentHeight] = mainWindow.getContentSize();
console.log(`内容区域：宽${contentWidth}px，高${contentHeight}px`);

接下来把窗口尺寸和你已经掌握的屏幕尺寸对比，然后动态设置CSS的overflow属性，这里有两种简便方案：

方案一：主进程判断后通知渲染进程 #

适合需要在主进程统一管理窗口状态的场景：

// 主进程代码
const { BrowserWindow, screen } = require('electron');
const mainWindow = new BrowserWindow();

// 获取屏幕可用尺寸（你已经掌握的方法）
const screenArea = screen.getPrimaryDisplay().workAreaSize;
// 获取窗口内容区域尺寸
const [contentW, contentH] = mainWindow.getContentSize();

// 判断是否需要滚动条
const needHorizontalScroll = contentW < screenArea.width;
const needVerticalScroll = contentH < screenArea.height;

// 通过IPC给渲染进程发消息
mainWindow.webContents.send('adjust-scroll', {
  horizontal: needHorizontalScroll,
  vertical: needVerticalScroll
});

然后在渲染进程里监听消息，设置样式：

// 渲染进程代码
const { ipcRenderer } = require('electron');

ipcRenderer.on('adjust-scroll', (_, config) => {
  document.body.style.overflowX = config.horizontal ? 'auto' : 'hidden';
  document.body.style.overflowY = config.vertical ? 'auto' : 'hidden';
});

方案二：直接在渲染进程处理（更简单） #

渲染进程里可以直接通过浏览器原生API获取内容区域尺寸，不用IPC，一步到位：

// 渲染进程代码
function updateScrollStyle() {
  const screenWidth = window.screen.width;
  const screenHeight = window.screen.height;
  // 获取当前窗口内容区的宽高
  const contentWidth = window.innerWidth;
  const contentHeight = window.innerHeight;

  // 动态设置滚动条
  document.body.style.overflowX = contentWidth < screenWidth ? 'auto' : 'hidden';
  document.body.style.overflowY = contentHeight < screenHeight ? 'auto' : 'hidden';
}

// 初始化时执行一次
updateScrollStyle();

// 监听窗口 resize 事件，实时更新
window.addEventListener('resize', updateScrollStyle);

这样就能完美实现你的需求：当窗口内容区域小于屏幕尺寸时，自动启用对应方向的滚动条啦。

内容的提问来源于stack exchange，提问作者Frikk Ormestad Larsen