模擬面試界面左側底部

通過檢查工具定位到其所在的位置：

直接對該組件進行美化：

  <!-- AI面試官列表 --><div class="ai-interviewer-section" v-show="activeTab === 'interviewer'"><el-scrollbar class="no-horizontal-scroll" style="height:100%"><div class="interviewer-list"><divclass="interviewer-list"v-for="interviewer in aiList":key="interviewer.interviewerId":class="['interviewer-item', { 'active': activeInterviewer === interviewer.interviewerId }]"@click="handleInterviewerSelect(interviewer.interviewerId)"><div class="interviewer-avatar"><i class="el-icon-user-solid"></i></div><div class="interviewer-name">{{ interviewer.name }}</div></div></div></el-scrollbar></div>

使用類選擇器實現了隱藏水平滾動條和確保內容不會溢出觸發水平滾動兩個功能。

/* 隱藏水平滾動條 */
.no-horizontal-scroll ::v-deep .el-scrollbar__wrap {overflow-x: hidden !important;
}/* 確保內容不會溢出觸發水平滾動 */
.interviewer-list {white-space: nowrap;/* 如果不需要橫向排列則移除 */width: 100%;box-sizing: border-box;
}

最終效果如下：

我的面試官界面

該界面有兩處滾動條需要去除，一處在左側底部，這個和上面差不多，還有一處和最右側，這個需要重新定位去除。

左側底部

因為和之前差不多，就在這里直接上代碼。

<el-scrollbar class="vertical-only-scrollbar" style="height:100%">
//...
</el-scrollbar>

 /* 使用深度選擇器隱藏水平滾動條 */:deep(.vertical-only-scrollbar .el-scrollbar__wrap) {overflow-x: hidden !important;padding-bottom: 0 !important;}

右側

定位到對應的div之后，直接加一個隱藏垂直滾動條的選擇器就行。

.right-panel.no-vertical-scroll {overflow-y: hidden !important;
}

最終效果：

知識庫管理頁面

同樣是有兩個滾動條需要隱藏。

這部分不再進行說明都和之前一模一樣。

最終效果（因為有些滾動條需要縮放才能看到，所以頁面進行了部分縮放）：