如何为Catalog Item中自动填充的文本变量添加滚动条？

方法一：使用Client Script（ onChange/onLoad 脚本） #

这是最直接适配你需求的方案，通过客户端脚本在Requested for选择后给目标变量DOM元素添加滚动样式：

1. 打开对应Catalog Item的Client Script，新建类型为onChange的脚本，触发条件选择Requested for字段；如果需要页面加载时就生效，也可选onLoad类型。
2. 写入以下代码（替换变量名即可）：

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue === '') {
        return;
    }
    // 替换成你的目标变量名称，比如'long_text_var'
    var targetInput = g_form.getControl('long_text_var');
    if (targetInput) {
        // 设置固定高度，超出后显示垂直滚动条
        targetInput.style.height = '150px';
        targetInput.style.overflowY = 'auto';
        // 可选：禁用文本框默认的拖动缩放，避免样式混乱
        targetInput.style.resize = 'none';
    }
}

3. 保存脚本后，当选择Requested for触发文本填充时，目标文本框会自动出现垂直滚动条。

方法二：直接配置变量CSS（全局/目录级） #

如果不想写脚本，可通过全局CSS样式实现：

• 导航到System UI > CSS，新建CSS记录，写入：

/* 替换为目标变量的DOM ID，可通过浏览器F12元素检查获取，比如'IO:long_text_var'需转义为'IO\\:long_text_var' */
#IO\\:long_text_var {
    height: 150px !important;
    overflow-y: auto !important;
    resize: none !important;
}

• 注意：DOM ID里的特殊字符（如冒号）需要用\\转义，确保样式能正确命中元素。

方法三：切换变量类型（简单备选） #

如果你的变量支持改为多行文本类型，可直接通过配置实现：

• 编辑目标变量，将类型从Single Line Text改为Multi Line Text。
• 在Type Specifications中设置Rows为固定值（比如5行），文本内容超过行数后会自动出现滚动条。
• 此方法无需代码，但仅适用于可切换为多行文本的场景。

补充说明：之前用Widget+HTML失败，大概率是因为Catalog Item的变量渲染逻辑和门户Widget不同，变量的DOM结构受平台原生规则限制，因此优先用上述客户端脚本或CSS方案更可靠。

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