提问人：SirH3nry 提问时间：11/17/2023 最后编辑：SirH3nry 更新时间：11/17/2023 访问量：13
无法让滚动条-装订线在底部滚动条上工作
Can't get scrollbar-gutter to work on bottom scrollbar
问：
每当我将属性添加到 div 时，它只会将装订线添加到右侧。overflow-x: auto
我添加了一个带有 div 并希望将排水沟添加到底部，但它只添加到右侧。scrollbar-gutter: stableoverflow-x: auto
答：
0赞
Peter Bucher
12/1/2023
#1
您需要使用
scrollbar-gutter: stable both-edges
评论
0赞
SirH3nry
12/1/2023
我也试过这个，但它把它添加到了左边和右边。
0赞
JulesUK
12/1/2023
你在设置宽度吗？另外，如果您可以展示一些示例代码，这也会有所帮助
0赞
SirH3nry
12/1/2023
我添加了一个最低限度可重新创建的小提琴链接。
0赞
iorgv
12/2/2023
#2
据我了解，您更需要隐藏滚动条，同时保留滚动功能。
为此，您需要的 CSS 是这样的：
/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
html {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
在行动中：
function hide() {
for (let el of document.querySelectorAll('.hide-me')) el.style.display = 'none';
}
function show() {
for (let el of document.querySelectorAll('.hide-me')) el.style.display = 'unset';
}@for $i from 0 through 16 {
.gap-#{$i} {
gap: #{$i * 4}#{"px"} !important;
}
}
@for $i from 0 through 16 {
.pb-#{$i} {
padding-bottom: #{$i * 4}#{"px"} !important;
}
}
@for $i from 0 through 16 {
.pa-#{$i} {
padding: #{$i * 4}#{"px"} !important;
}
}
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-shrink-0 {
flex-shrink: 0
}
.flex-shrink-1 {
flex-shrink: 1
}
.justify-end {
justify-content: flex-end;
}
$repeated-section-width: 170px;
.repeated-section-width {
width: $repeated-section-width;
}
/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
html {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}<div class="d-flex gap-3">
<div class="d-flex flex-column pb-3 flex-shrink-0 justify-end gap-3" style="height: 200x;">
<span style="height: 21px;">input label 1</span>
<span style="height: 21px;">input label 2</span>
<span style="height: 21px;">input label 3</span>
</div>
<div class="d-flex gap-3 pa-1" style="overflow-x: auto; scrollbar-gutter: stable both-edges;">
<div class="d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
<div style="margin-bottom: 8px;">
item info 1
<br>
item info 2
<br>
item info 3
</div>
<div class="d-flex flex-column gap-3">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
<div class="d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
<div style="margin-bottom: 8px;">
item info 1
<br>
item info 2
<br>
item info 3
</div>
<div class="d-flex flex-column gap-3">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
<div class="hide-me d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
<div style="margin-bottom: 8px;">
item info 1
<br>
item info 2
<br>
item info 3
</div>
<div class="d-flex flex-column gap-3">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
<div class="hide-me d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
<div style="margin-bottom: 8px;">
item info 1
<br>
item info 2
<br>
item info 3
</div>
<div class="d-flex flex-column gap-3">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
<div class="hide-me d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
<div style="margin-bottom: 8px;">
item info 1
<br>
item info 2
<br>
item info 3
</div>
<div class="d-flex flex-column gap-3">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
<div class="hide-me d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
<div style="margin-bottom: 8px;">
item info 1
<br>
item info 2
<br>
item info 3
</div>
<div class="d-flex flex-column gap-3">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
</div>
</div>
<hr>
<button onclick="hide()">hide</button>
<button onclick="show()">show</button>评论
0赞
SirH3nry
12/2/2023
不幸的是，用户仍然希望看到并能够单击滚动条本身。
评论