Skip to content

Commit f657142

Browse files
committed
优化滚动条样式,修复滚动条影响可视宽度的问题
(cherry picked from commit 9b54eb8)
1 parent a7d18b5 commit f657142

File tree

2 files changed

+31
-1
lines changed

2 files changed

+31
-1
lines changed

src/Terminal.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,11 +245,13 @@ export default {
245245
} else if (type === 'elementInfo') {
246246
let windowRect = this.terminalWindow.getBoundingClientRect()
247247
let containerRect = this.terminalContainer.getBoundingClientRect()
248+
let hasScroll = this.terminalWindow.scrollHeight > this.terminalWindow.clientHeight
249+
|| this.terminalWindow.offsetHeight > this.terminalWindow.clientHeight
248250
return {
249251
pos: this._getPosition(), // 窗口所在位置
250252
screenWidth: containerRect.width, // 窗口整体宽度
251253
screenHeight: containerRect.height, // 窗口整体高度
252-
clientWidth: windowRect.width - 40, // 可显示内容范围高度,减去padding值
254+
clientWidth: hasScroll ? (windowRect.width - 48) : (windowRect.width - 40), // 可显示内容范围高度,减去padding值,如果有滚动条去掉滚动条宽度
253255
clientHeight: windowRect.height, // 可显示内容范围高度
254256
charWidth: {
255257
en: this.byteLen.en, // 单个英文字符宽度

src/css/style.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,34 @@
8585
background-color: #2ec971;
8686
}
8787

88+
.t-window::-webkit-scrollbar {
89+
width: 8px;
90+
height: 8px;
91+
}
92+
93+
.t-window::-webkit-scrollbar-button {
94+
width: 0;
95+
height: 0;
96+
display: none;
97+
}
98+
99+
.t-window::-webkit-scrollbar-thumb {
100+
border-radius: 6px;
101+
border-style: dashed;
102+
border-color: transparent;
103+
border-width: 2px;
104+
background-color: rgba(157, 165, 183, 0.4);
105+
background-clip: padding-box;
106+
}
107+
108+
.t-window::-webkit-scrollbar-thumb:hover {
109+
background: rgba(157, 165, 183, 0.7);
110+
}
111+
112+
.t-window::-webkit-scrollbar-track {
113+
border-radius: 6px;
114+
}
115+
88116
.t-window,.t-ask-input, .t-window p,.t-window div {
89117
font-size: 13px;
90118
font-family: Monaco, Menlo, Consolas, monospace;

0 commit comments

Comments
 (0)