SVG溢出问题：XSLT生成游戏列表过多时无法显示且滚动失效

首先得点透你遇到的核心问题：用绝对定位（y="{($position)*10}%"）放置游戏项时，元素会脱离正常文档流——这意味着父容器根本“感知”不到这些元素的存在，自然不会因为内容过多触发overflow: scroll。下面给你两种可行的解决思路，按需选择：

方案1：改用流式布局（推荐，最省心） #

如果不是必须用绝对定位来排列游戏，直接换成正常的流式布局，比如用块级元素或者Flex，给父容器设置固定高度+滚动属性就行。

示例XSLT代码：

<xsl:template match="games">
  <!-- 外层容器：设置固定高度（比如80%视口高度），垂直滚动 -->
  <div style="height: 80vh; overflow-y: auto; padding: 1rem; border: 1px solid #eee;">
    <xsl:for-each select="game">
      <!-- 每个游戏项：流式排列，自带间距 -->
      <div style="margin-bottom: 1rem; padding: 0.8rem; background: #f5f5f5; border-radius: 4px;">
        <h3><xsl:value-of select="title"/></h3>
        <p>类型：<xsl:value-of select="genre"/></p>
      </div>
    </xsl:for-each>
  </div>
</xsl:template>

这种方式不需要计算定位，父容器能自动识别内容高度，超过设定高度就会出现滚动条，完美适配任何数量的游戏，不管你的XML参数怎么变都能正常工作。

方案2：保留绝对定位的兼容方案 #

如果业务需求必须用百分比定位，那得手动给承载游戏项的容器设置总内容高度，再在外层套一个固定高度的滚动容器。

示例XSLT代码：

<xsl:template match="games">
  <!-- 外层滚动容器：固定高度，开启垂直滚动 -->
  <div style="height: 80vh; overflow-y: scroll; position: relative; border: 1px solid #eee;">
    <!-- 内层定位容器：高度等于所有游戏项的总高度（每个占10%，总数×10%） -->
    <div style="height: {count(game) * 10}%; position: relative;">
      <xsl:for-each select="game">
        <!-- 计算当前游戏的定位位置（注意position()从1开始，要减1才是正确的起始百分比） -->
        <xsl:variable name="item-position" select="position() - 1"/>
        <div style="position: absolute; top: {$item-position * 10}%; left: 0; width: 100%; padding: 0.8rem;">
          <h3><xsl:value-of select="title"/></h3>
          <p>评分：<xsl:value-of select="rating"/></p>
        </div>
      </xsl:for-each>
    </div>
  </div>
</xsl:template>

这里的关键是：内层容器的高度要等于所有游戏项的总高度（count(game)*10%），这样外层容器才会“看到”超出自身高度的内容，从而显示滚动条。另外要注意position()的起始值——如果你的$position是从1开始的，一定要减1，不然第一个游戏会从10%的位置开始，顶部会空出一块。

额外排查点 #

如果试了上面的方法还是没效果，打开浏览器开发者工具（F12）查看容器的计算样式，确认overflow属性是不是被其他CSS规则覆盖了（比如外部样式表的!important）。

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