如何获得更大的静态滚动条（也称为普通滚动条）？

Question

如何获得更大的静态滚动条（也称为普通滚动条）？

66

我很高兴外部的覆盖滚动条终于消失了。

但是滚动条仍然是一条非常细的线，在鼠标悬停时变得稍微宽一点，但仍然很细。

我怎样才能获得一个“正常”的滚动条呢？就像在其他操作系统中一样，就像在Firefox中一样，一个不会根据鼠标指向而改变的滚动条，并且有一个合适的宽度。

我已经尝试过了。

gsettings set com.canonical.desktop.interface scrollbar-mode normal

但是没有运气。

- Simon

5这个问题怎么还没解决，为什么不成为标准系统设置的一部分呢？天啊，四年前我因为这样的问题曾经愤然离开Ubuntu，去了更好的Mint系统...哈哈 - neuronet

1@neuronet 兄弟，阿门 - Steve Cohen

2非常好的问题... Athena工具包在1988年的X11R1版本中就已经实现了这个功能。32年后，滚动条变得更加难以使用了... - Swiss Frank

4百分之百认真。在Fedora+Cinnamon中也是一样的。滚动条太小了。世界上人们到底在想什么，竟然没有一个简单的选项让它们变大。 - mrbean

6个回答

23

编辑此文件 /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

找到这一行（大约在第1200行）：-GtkRange-slider-width: 10;

将10改为更大的数字，如20或30，然后完成 :)

我也觉得它们太小了...

看这张图片：

如果你将滚动条大小更改为16，并且希望它们保持不变，即使没有鼠标悬停在上面，那么请按照上面的图片进行更改。

如果你使用的大小不是16，请尝试调整边距大小以达到适合的效果。

- Delorean

1我将其设置为16，并注释了所有的hover/drag内容，现在滚动条是好的旧静态滚动条...不过它们仍然会在几秒钟后消失。有没有我没看到的某些动画函数？ - Simon

好的，在你进行第一次更改的下方，你会看到这些内容：margin-left: 2px;以及margin-right和margin-top。将这三个值都从2px改为7px，你的滚动条就会保持宽度。 - Delorean

我在我的回答中添加了一张图片，试图让你清楚地知道需要改变什么才能使滚动条保持大尺寸。 - Delorean

7非常感谢！我的爷爷在使用那些非常小的滚动条时遇到了很大困难，但是我将它改成了25像素，现在他像专业人士一样轻松地进行滚动！ - Erty Seidohl

@ErtySeidohl 很高兴能帮上忙 :) - Delorean

1请注意，我将我的设置更改为24，并且7像素仍然是正确的边距大小，以确保在悬停时保持正确。还请确保重新启动您的程序（例如，Firefox），以确保更改生效。这是一个很棒的事情。 - neuronet

@neuronet 感谢信息。这确实是需要测试一下并尝试不同的大小来看看哪种大小适合您的设置。 - Delorean

这个选项应该在“通用访问”中提供。 - HongboZhu

在Ubuntu 18.04上，这个答案效果更好且更简单：https://askubuntu.com/a/908584/548938 - neuronet

将我的边距设置为推荐值，但现在有额外的未使用空间，减少了可视屏幕区域。然后将所有边距设置为0像素；没有问题，所有的条都是静态的，在条上没有额外的填充/边距。Ubu 16. - Seek Truth

22

修改 -GtkRange-slider-width 对默认的GTK+3主题没有任何影响。相反，你可以这样做：

scrollbar slider {
    /* Size of the slider */
    min-width: 20px;
    min-height: 20px;
    border-radius: 22px;

    /* Padding around the slider */
    border: 5px solid transparent;
}

将上述内容放置在~/.config/gtk-3.0/gtk.css文件中。

- Vladimir Panteleev

1我应该把它放在哪里？ - kenn

@kenn ~/.config/gtk-3.0/gtk.css： - Vladimir Panteleev

3在Ubuntu 18.04上运行得非常好。谢谢！ - Steve Cohen

9个月后：在Ubuntu 18.04下，这确实像魔法一样运作良好 - 除了它会让GNUCash应用程序混乱不堪。请参见https://lists.gnucash.org/pipermail/gnucash-user/2019-February/082643.html。进行这些更改会破坏GNUCash中的滚动条功能，但不会影响其他应用程序。唉。 - Steve Cohen

1@SteveCohen，我看了gnucash的链接。你写的是“~~/.config/gtk-3.0.gtk.css”，但应该是`~~/.config/gtk-3.0/gtk.css`。此外，gnucash似乎是一个gtk2应用程序，而不是gtk3应用程序。 - DK Bose

1如果你想设置不同的min-width和min-height值，请定义两个块scrollbar.vertical slider和scrollbar.horizontal slider，并相应地更改这些值。否则，你将得到不一致的水平和垂直滚动条。 - Marc.2377

最佳答案。为了在Firefox中更改滚动条，我还必须将gtk.css文件复制到~/snap/firefox/323/.config/gtk3.0。 - Ubuntu_enthusiast

在Ubuntu 20.04的Gnome桌面环境下，运行得非常顺畅。只需要重新启动应用程序，就可以获得正常的滚动条。同样，在重新启动后，Firefox 80.0.1（64位）也成功应用了这个功能。我的电脑上是通过正常安装方式安装的Firefox，并非使用snap。 - V-R

12

以下是恢复不会消失且具有固定宽度（即“经典”）的滚动条的步骤。在Ubuntu 16.04的GNOME Flashback会话中进行了测试（在Unity中也适用）。 步骤1。备份/etc/environment文件。运行sudo nano /etc/environment，然后在其中添加下一行：

GTK_OVERLAY_SCROLLING=0

这将阻止滚动条的自动隐藏行为。

第二步。为了避免篡改主题文件 `/usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css`，我们将从那里借用一些代码，进行修改并放入用户配置文件夹中。创建 `~/.config/gtk-3.0/gtk.css` 并将以下内容放入其中：

/* Adding the buttons on the edges (if you don't need them, skip the next 4 lines)
 */

.scrollbar {
  -GtkScrollbar-has-backward-stepper: 1;
  -GtkScrollbar-has-forward-stepper: 1;
}

/* Scrollbar trough squeezes when cursor hovers over it. Disabling that
 */

.scrollbar.vertical:hover:dir(ltr),
.scrollbar.vertical.dragging:dir(ltr) {
    margin-left: 0px;
}

.scrollbar.vertical:hover:dir(rtl),
.scrollbar.vertical.dragging:dir(rtl) {
    margin-right: 0px;
}

.scrollbar.horizontal:hover,
.scrollbar.horizontal.dragging,
.scrollbar.horizontal.slider:hover,
.scrollbar.horizontal.slider.dragging {
    margin-top: 0px;
}

/* Slider widens to fill the scrollbar when cursor hovers over it. Making it permanent
 */

.scrollbar.slider.vertical:dir(ltr):not(:hover):not(.dragging) {
    margin-left: 0px;
}

.scrollbar.slider.vertical:dir(rtl):not(:hover):not(.dragging) {
    margin-right: 0px;
}

.scrollbar.slider.horizontal:not(:hover):not(.dragging) {
    margin-top: 0px;
}

第三步。创建~/.config/gtk-3.0/settings.ini文件，并将以下内容添加到其中：

[Settings]
gtk-primary-button-warps-slider = false

当你点击滚动条的任一侧时，这将恢复按页滚动的行为。如果该文件已经存在，只需在其[Settings]部分中添加最后一行。

第四步。卸载overlay-scrollbar和overlay-scrollbar-gtk2软件包 - 你将不再需要它们。

P.S.如果您使用了一些需要超级用户权限的应用程序（如Synaptic、Gedit等），那么您还应将这些gtk.css和settings.ini文件放入root用户的个人资料文件夹中：

sudo cp ~/.config/gtk-3.0/gtk.css /root/.config/gtk-3.0/
sudo cp ~/.config/gtk-3.0/settings.ini /root/.config/gtk-3.0/

P.P.S. 如果您发现这些滚动条对您来说太窄，可以使其更宽。只需将下一行添加到您的~/.config/gtk-3.0/gtk.css文件中：

.scrollbar {
  -GtkRange-slider-width: 15;
}

根据需要调整宽度（默认为10）。如有需要，还需更新/root/.config/gtk-3.0/gtk.css文件。

- whtyger

我能够通过唯一的项目 .scrollbar {-GtkRange-slider-width: 15; … 来增加宽度，而不需要你提到的其他选项。但是这只在虚拟机上有效。当我尝试在桌面上做同样的操作时，无论我尝试了所有步骤，都没有起作用。我想这可能是Firefox 52中的一个错误，因为在虚拟机上，答案起到了帮助作用，滚动条对悬停事件有正确的反应，并自动变宽。而在桌面上，它不能处理悬停（这实际上是我需要扩大滚动条的原因），并且gtk.css也被忽略了。 - Dmitry Koroliov

1@user907860 恰恰相反，上述所有步骤都是为了完全忽略悬停事件。它们的目的是创建静态、固定的滚动条，其宽度永远不会改变，就像在Unity之前的时代一样。 - whtyger

是的，你说得对。我只是指增加宽度，而不触及悬停功能。 - Dmitry Koroliov

顺便问一下，你有没有想法，为什么在桌面上的Firefox 52中无法正常工作，而在虚拟机上可以？http://askubuntu.com/questions/892097/why-are-gtk-3-0-custom-settings-ignored - Dmitry Koroliov

1这应该是被接受的答案。玩弄dconf和主题会产生非常奇怪的结果 - 既不是覆盖，也不是正常的。这个答案提供了正常的滚动条。这必须在GTK层面完成。注意：Ubuntu即将转向Qt。 - Dominic Cerisano

@DominicCerisano 你确定吗？Ubuntu正在放弃Unity，并转向GNOME，所以它应该保持使用GTK。 - whtyger

他们正在放弃除了Gnome之外的所有基于GTK的窗口系统。如果你想要一个替代方案，只有基于Qt的系统得到支持。所以现在GTK代表着Gnome（仅限Gnome）工具包。你知道的，就是那种杀死Unity的东西。 - Dominic Cerisano

7

我正在使用Ubuntu 18.04，这是唯一一个能够改变所有东西的滚动条的解决方案，从Firefox到LibreOffice再到gnome-terminal都适用。上面的解决方案对于一个或两个应用程序来说效果不错，但并不适用于所有情况。

注意：这将给你非常大的滚动条，适合大屏幕，因为你可以用眼角的余光看到它们，而不必每次想要抓住滚动条时都要看向屏幕侧边。如果你想要更小的滚动条，将所有的70px改成更小的数字，比如20px或30px，并相应地进行调整。

将以下文本放入“~/.config/gtk-3.0/gtk.css”文件中：

.scrollbar,
scrollbar {
-GtkScrollbar-has-backward-stepper: 1;
-GtkScrollbar-has-forward-stepper: 1;
}

scrollbar slider {
background-color: @scrollbar_track_color;
}

.scrollbar.vertical slider,
scrollbar.vertical slider {
    min-height: 150px;
    min-width: 70px;
}

.scrollbar.horizontal.slider,
scrollbar.horizontal slider {
min-width: 40px;
min-height: 10px;
}

.scrollbar.vertical.slider:hover,
scrollbar.vertical:hover slider {
min-width: 70px;
}

.scrollbar.horizontal.slider:hover,
scrollbar.horizontal:hover slider {
    min-height: 10px;
}

.scrollbar.contents,
scrollbar contents {
    background-color: transparent;
    background-image: none;
    background-size: 0;
    border: none;
    border-radius: 0;
}

.scrollbar.trough,
scrollbar trough {
    background-image: none;
    border: none;
}

.scrollbar:hover:backdrop,
.scrollbar.dragging:backdrop,
scrollbar:hover:backdrop,
scrollbar.dragging:backdrop {
    background-color: alpha(@backdrop_selected_bg_color, 0.5);
}


.scrollbar.vertical:hover:dir(ltr),
.scrollbar.vertical:active:dir(ltr),
scrollbar.vertical:hover:dir(ltr),
scrollbar.vertical:active:dir(ltr) {
    margin-left: 0px;
}

.scrollbar.vertical:hover:dir(rtl),
.scrollbar.vertical:active:dir(rtl),
scrollbar.vertical:hover:dir(rtl),
scrollbar.vertical:active:dir(rtl) {
    margin-right: 0px;
}

.scrollbar.horizontal:hover,
.scrollbar.horizontal:active,
scrollbar.horizontal:hover,
scrollbar.horizontal:active {
    margin-top: 0px;
}

.scrollbar.slider,
scrollbar slider {
    background-color: alpha(@backdrop_filling_bg, 0.75);
    border-radius: 10px;
}

.scrollbar.slider:hover,
.scrollbar.slider:active,
scrollbar slider:hover,
scrollbar slider:active {
    border-radius: 20px;
    margin: 0;
}


.scrollbar.vertical:dir(ltr):not(:hover):not(.dragging),
scrollbar.vertical:dir(ltr):not(:hover):not(.dragging) {
    margin-left: 0px;
}

.scrollbar.vertical:dir(rtl):not(:hover):not(.dragging),
scrollbar.vertical:dir(rtl):not(:hover):not(.dragging) {
    margin-right: 0px;
}

.scrollbar.horizontal:not(:hover):not(.dragging),
scrollbar.horizontal:not(:hover):not(.dragging) {
    margin-top: 0px;
}


.scrollbar.slider:hover,
scrollbar slider:hover {
    background-color: alpha(@backdrop_filling_bg, 0.6);
}

.scrollbar.slider:active,
scrollbar slider:active {
    background-color: @backdrop_filling_bg;
}

.scrollbar.slider:backdrop,
scrollbar slider:backdrop {
    background-color: alpha(@backdrop_filling_bg, 0.75);
}

.scrollbar.slider:hover:backdrop,
scrollbar slider:hover:backdrop {
    background-color: alpha(@backdrop_filling_bg, 0.6;
}

.scrollbar.slider:active:backdrop,
scrollbar slider:active:backdrop {
    background-color: @backdrop_filling_bg;
}

scrollbar {
    min-width: 70px;
    min-height: 70px;
}

- s. wolfe

2对于最新的主题，这使得滑块不可见。相反，只放置处理大小的行会起到很好的效果。将以下文本放入~/.config/gtk-3.0/gtk.css： - Gaurang Arora

0

在Ubuntu 20.04上，我合并了上述解决方案，只是为了在Libre Office上获得更宽的滚动条，而不改变其颜色。

这是我从上面的答案中合并的代码。

/* Adding the buttons on the edges (if you don't need them, skip the next 4 lines)
 */

.scrollbar {
  -GtkScrollbar-has-backward-stepper: 1;
  -GtkScrollbar-has-forward-stepper: 1;
}

/* Scrollbar trough squeezes when cursor hovers over it. Disabling that
 */

.scrollbar.vertical:hover:dir(ltr),
.scrollbar.vertical.dragging:dir(ltr) {
    margin-left: 0px;
}

.scrollbar.vertical:hover:dir(rtl),
.scrollbar.vertical.dragging:dir(rtl) {
    margin-right: 0px;
}

.scrollbar.horizontal:hover,
.scrollbar.horizontal.dragging,
.scrollbar.horizontal.slider:hover,
.scrollbar.horizontal.slider.dragging {
    margin-top: 0px;
}

/* Slider widens to fill the scrollbar when cursor hovers over it. Making it permanent
 */

.scrollbar.slider.vertical:dir(ltr):not(:hover):not(.dragging) {
    margin-left: 0px;
}

.scrollbar.slider.vertical:dir(rtl):not(:hover):not(.dragging) {
    margin-right: 0px;
}

.scrollbar.slider.horizontal:not(:hover):not(.dragging) {
    margin-top: 0px;
}


.scrollbar {
  -GtkRange-slider-width: 15;
}

.scrollbar.vertical slider,
scrollbar.vertical slider {
    min-height: 150px;
    min-width: 70px;
}

.scrollbar.horizontal.slider,
scrollbar.horizontal slider {
min-width: 40px;
min-height: 10px;
}

.scrollbar.vertical.slider:hover,
scrollbar.vertical:hover slider {
min-width: 70px;
}

.scrollbar.horizontal.slider:hover,
scrollbar.horizontal:hover slider {
    min-height: 10px;
}

- Aleksandar Pavić

- pauljohn32 · Accepted Answer

我认为你应该小心一点。我们中的许多人都不建议你编辑主题的系统默认设置，除非你真的打算干扰系统中所有用户账户的活动。如果你在这样做时犯了错误，那么它会影响到所有用户账户。另一个需要注意的地方是，当软件包更新时，你的更改将被删除。

这种策略的另一个缺点是它只会改变一个GTK主题的行为，但你可能想要改变所有GTK-3.0主题中的滚动条大小。

相反，你可以在用户账户内编辑配置文件。关键是找出最接近所需结果的路径。你编辑的GTK文件是CSS（层叠样式表）设置的一部分，因此你在账户中进行的自定义将修改这些设置。

在你的用户账户中，在文件夹~/.config/gtk-3.0/gtk.css中，我目前有一个名为"gtk.css"的文件。

.scrollbar {
  -GtkScrollbar-has-backward-stepper: true;
  -GtkScrollbar-has-forward-stepper: true;
  -GtkRange-slider-width: 20;
  -GtkRange-stepper-size: 20;
}

如果你稍微玩弄一下，你会发现可以从上面编辑的主题文件中集成许多具体的更改。曾经我努力地调整了很多设置，但现在我处于“保持简单”的模式。

如果你真的想编辑很多设置，正确的做法是复制整个gtk-widgets.css文件并将其放入你的~/.config/gtk-3.0文件夹中。然后尽情地调整设置。

在同一个文件夹中，我有一个名为“settings.ini”的文件。

[Settings]
gtk-primary-button-warps-slider = false

这样做可以防止滚动条上的点击将文件移动到特定位置，而是只会向前滚动一个屏幕。我更喜欢这样！

另一个值得知道的事情是，更改主题文件（无论是之前建议的方式还是我建议的用户帐户更改所有基于GTK-3.0的主题）只会影响基于GTK-3.0工具包的程序。它不会改变所有应用程序的滚动条。它只适用于读取gtk-3.0配置文件的应用程序。因此，由于您正在编辑一个gtk-3.0主题，使用QT或gtk-2.0编写的应用程序不会改变。因此，更改所有程序的滚动条大小比您预期的要困难/繁琐得多。

我也已经在gtk-2.0中更改了滚动条的宽度。这是在一个单独的文件夹~/.config/gtk-2.0中完成的。要创建的文件名为gtkrc。

style "scroll"
{
 GtkScrollbar::slider-width = 20
}

请注意，gtk-2.0是一个设计不同的设置，因此语法也不同，你不能简单地将gtk-3.0的css复制到gtk-2.0文件夹中。

我注意到当你改变滚动条时，一些应用程序的行为会变得糟糕，因为滑块槽内的"抓取器"的大小没有正确调整。我怀疑@Dorian的文件中的滚动条拖动更改可能会有所帮助。我可能会回来尝试一下。我会告诉你的。

总结：关键的"老派Linux系统管理员建议是"不要在整个系统范围内编辑配置文件。这样做会使你的系统面临风险，你的更改在更新后不会保留，并且需要root访问权限，这对于像这样的外观问题来说并不好。找到一种在用户账户中进行更改的方法。

PS. 如果你真的想要玩弄系统文件（有时候我会这样做，如果我真的希望坚持让所有用户将我的最爱足球队的颜色作为他们的壁纸和配色方案 :) ），你首先应该做的是复制原始文件并将其命名为"gtk-widgets.css.orig"。然后，在编辑文件时，将你的编辑副本保存为"gtk-widgets.css.20160919"，其中我在末尾加上了YYYYMMDD日期。这样，当deb软件包更新时，你将拥有一个你编辑过的文件的副本。你所编辑的名为gtk-widgets.css的文件将被软件包安装覆盖。