diff --git a/src/main/resources/views/layouts/v4/home/user.js b/src/main/resources/views/layouts/v4/home/user.js
index 2190499b..5189ad73 100644
--- a/src/main/resources/views/layouts/v4/home/user.js
+++ b/src/main/resources/views/layouts/v4/home/user.js
@@ -41,7 +41,7 @@ const user = {
 							    <span class="meta-icon"><i class="fa fa-shield" aria-hidden="true"></i></span>
 							    <div>
 								    <span class="meta-label">角色</span>
-                                    <div class="portal-member-roles"><span v-for="(role, index) in roleTags" :key="index" class="portal-member-role">{{ role }}</span><span v-if="!roleTags.length" class="meta-value">—</span></div>
+                                    <div class="portal-member-roles" tabindex="0" role="region" aria-label="角色列表，可滚动查看全部角色"><span v-for="(role, index) in roleTags" :key="index" class="portal-member-role">{{ role }}</span><span v-if="!roleTags.length" class="meta-value">—</span></div>
 							    </div>
 						    </div>
 					    </div>
@@ -318,7 +318,10 @@ const user = {
         #v4-home-app .portal-member .meta-label { margin: 0; color: #8995a5; font-size: 12px; line-height: 20px; }
         #v4-home-app .portal-member .meta-value { color: #283c54; font-size: 12px; font-weight: 400; line-height: 20px; overflow-wrap: anywhere; }
         #v4-home-app .portal-member .meta-row-roles > div { display: block; }
-        #v4-home-app .portal-member-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
+        /* 角色最多占用三行标签的高度，超出时内部滚动，避免撑高首页横幅。 */
+        #v4-home-app .portal-member-roles { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; margin-top: 5px; max-height: 88px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #c5d9ee transparent; }
+        #v4-home-app .portal-member-roles::-webkit-scrollbar { width: 4px; }
+        #v4-home-app .portal-member-roles::-webkit-scrollbar-thumb { background: #c5d9ee; border-radius: 4px; }
         #v4-home-app .portal-member-role { max-width: 100%; display: inline-block; padding: 3px 8px; border: 1px solid #e1ebf7; border-radius: 5px; background: #f3f7fc; color: #46617f; font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
         #v4-home-app .portal-member .weather-section { margin-top: auto; padding: 8px 10px; border-radius: 8px; background: #f0f7ff; color: #527494; }
         #v4-home-app .portal-member .weather-header { gap: 6px; }