Vue中使用响应式变量加载内容时如何自定义iframe滚动条样式

我正在开发仿Outlook邮箱的单页应用（SPA），通过以下代码加载邮件模板：

<v-col class="px-10">
  <div v-if="selectedEmailLoading" class="h-100 w-100 d-flex justify-center align-center">
    <v-progress-circular
      color="primary"
      indeterminate
      :size="85"
      :width="12"
    ></v-progress-circular>
  </div>
  <div v-else class="selected-email overflow-hidden d-flex flex-column" style="height: calc(100vh - 240px);">
    <div class="email-header-info">
      <div class="from d-flex my-2">
        <div class="font-weight-bold pr-3 text-h6">
          {{currentEmail?.subject}}
        </div>
      </div>
      <div class="d-flex">
        <div class="avatar ma-5">
          <v-avatar color="primaryLighten1" size="x-large">
            <span class="text-h5">{{currentEmail?.from.name ? currentEmail?.from.name.split(",").slice(0, 2).map((n: any[])=>n[0]).join("") : ""}}</span>
          </v-avatar>
        </div>
        <div class="contact-info">
          <div class="from d-flex my-2">
            <div class="font-weight-regular text-h6">
              {{currentEmail?.from.name +' <' + currentEmail?.from.email_address + '>'}}
            </div>
          </div>
          <div class="to d-flex my-2 flex-wrap">
            <div class="font-weight-medium mr-3">
              To:
            </div>
            <span v-for="contact in currentEmail?.to" class="text-subtitle-1 text-grey-darken-1 pr-2">
              {{ contact.name + ';'}}
              <v-tooltip
                activator="parent"
                location="top"
                color="primary"
              >{{contact.email_address}}</v-tooltip>
            </span>
          </div>
          <div v-if="currentEmail?.cc.length > 0" class="cc d-flex my-2 flex-wrap">
            <div class="font-weight-medium mr-3">
              Cc:
            </div>
            <span v-for="contact in currentEmail?.cc" class="text-subtitle-1 text-grey-darken-1 pr-2">
              {{ contact.name + ';'}}
              <v-tooltip
                activator="parent"
                location="top"
                color="primary"
              >{{contact.email_address}}</v-tooltip>
            </span>
          </div>
          <div class="cc d-flex my-2 flex-wrap">
            <v-chip v-for="attachment in currentEmail?.file_attachments" prepend-icon="mdi-paperclip" size="large" color="primary" class="ma-2" @click="loadAttachment(currentEmail, attachment)">
              {{attachment.file_name.length > 20 ? attachment.file_name.slice(0, 20) + '...' : attachment.file_name}}
              <v-tooltip
                activator="parent"
                location="top"
                color="primary"
              >{{attachment.file_name}}</v-tooltip>
            </v-chip>
          </div>
        </div>
      </div>
    </div>
    <div class="email-body flex-grow-1">
      <iframe :srcdoc="currentEmail?.body" class="w-100 h-100 border-none" id="body-content"></iframe>
    </div>
  </div>
</v-col>

为避免邮件HTML样式影响主应用，我通过iframe的srcdoc属性绑定响应式变量currentEmail?.body注入邮件内容。当前iframe采用默认滚动条样式，与应用已有的自定义滚动条风格不符，应用自定义滚动条CSS如下：

/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--v-theme-primaryLighten4));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

想请教：能否调整iframe的滚动条样式？或是有更优的右侧flex容器CSS布局方案？

一、调整iframe滚动条样式 #

iframe是独立的文档环境，主应用CSS无法直接控制其滚动条，可通过以下两种方案解决：

1. 动态注入样式到iframe文档 #

监听iframe的load事件，在其加载完成后向内部添加自定义滚动条样式：

<iframe 
  :srcdoc="currentEmail?.body" 
  class="w-100 h-100 border-none" 
  id="body-content"
  @load="applyCustomScrollbar"
></iframe>

添加Vue方法实现样式注入：

applyCustomScrollbar() {
  const iframe = document.getElementById('body-content');
  if (!iframe?.contentDocument) return;
  
  const style = document.createElement('style');
  style.textContent = `
    ::-webkit-scrollbar {
      width: 20px;
    }
    ::-webkit-scrollbar-track {
      background-color: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgb(var(--v-theme-primaryLighten4));
      border-radius: 20px;
      border: 6px solid transparent;
      background-clip: content-box;
    }
    /* 兼容Firefox */
    html {
      scrollbar-width: thin;
      scrollbar-color: rgb(var(--v-theme-primaryLighten4)) transparent;
    }
  `;
  iframe.contentDocument.head.appendChild(style);
}

2. 隐藏iframe滚动条，用外层容器模拟 #

将iframe滚动条隐藏，让外层email-body容器负责滚动，直接复用主应用的自定义滚动条：

.email-body {
  flex-grow: 1;
  overflow-y: auto;
}
.email-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
}

同时在applyCustomScrollbar方法中补充，确保iframe内容自适应高度：

iframe.contentDocument.body.style.margin = '0';
iframe.contentDocument.body.style.height = 'fit-content';
iframe.contentDocument.body.style.overflow = 'hidden';

二、更优的Flex容器布局方案 #

针对当前布局的硬编码和灵活性问题，可做以下优化：

1. 用CSS变量替代固定数值 #

将高度值定义为全局变量，方便后续调整：

:root {
  --email-top-offset: 240px;
}
.selected-email {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--email-top-offset));
}

2. 优化响应式适配 #

针对小屏幕调整布局高度，避免溢出：

@media (max-width: 768px) {
  :root {
    --email-top-offset: 300px;
  }
}

3. 移除内联样式，改用类名管理 #

将内联的高度样式移到CSS类中，提升代码可维护性：

<div v-else class="selected-email overflow-hidden d-flex flex-column">
  <!-- 内容不变 -->
</div>

内容的提问来源于stack exchange，提问作者Qiuzman