diff --git a/examples/elements/scrollable.zig b/examples/elements/scrollable.zig
index aaefe2d..fdfe6ca 100644
--- a/examples/elements/scrollable.zig
+++ b/examples/elements/scrollable.zig
@@ -148,10 +148,10 @@ pub fn main() !void {
     defer container.deinit();
 
     // place empty container containing the element of the scrollable Container.
-    var scrollable_top: App.Scrollable = .init(top_box, .enabled(.grey));
+    var scrollable_top: App.Scrollable = .init(top_box, .enabled(.default, false));
     try container.append(try App.Container.init(allocator, .{}, scrollable_top.element()));
 
-    var scrollable_bottom: App.Scrollable = .init(bottom_box, .enabled(.white));
+    var scrollable_bottom: App.Scrollable = .init(bottom_box, .enabled(.white, true));
     try container.append(try App.Container.init(allocator, .{}, scrollable_bottom.element()));
 
     try app.start();
diff --git a/src/element.zig b/src/element.zig
index d96d5ad..690f9ac 100644
--- a/src/element.zig
+++ b/src/element.zig
@@ -231,13 +231,18 @@ pub fn Scrollable(Model: type, Event: type) type {
             // TODO the scrollbar bool and the color should be in their own struct using `enabled` and `color` inside of the struct to be more consistent with other `Configuration` structs
             scrollbar: bool,
             color: Color = .default,
+            show_background: bool = false,
             x_axis: bool = false,
             y_axis: bool = false,
 
             pub const disabled: @This() = .{ .scrollbar = false };
 
-            pub fn enabled(color: Color) @This() {
-                return .{ .scrollbar = true, .color = color };
+            pub fn enabled(color: Color, show_background: bool) @This() {
+                return .{
+                    .scrollbar = true,
+                    .color = color,
+                    .show_background = show_background,
+                };
             }
         };
 
@@ -412,8 +417,10 @@ pub fn Scrollable(Model: type, Event: type) type {
                                 .fg = this.configuration.color,
                                 .emphasis = if (row >= scrollbar_starting_pos and row <= scrollbar_starting_pos + scrollbar_size)
                                     &.{} // scrollbar itself
+                                else if (this.configuration.show_background)
+                                    &.{.dim} // background (around scrollbar)
                                 else
-                                    &.{.dim}, // background (around scrollbar)
+                                    &.{.hidden}, // hide background
                             },
                             .cp = '🮋', // 7/8 block right
                         };
@@ -430,8 +437,10 @@ pub fn Scrollable(Model: type, Event: type) type {
                                 .fg = this.configuration.color,
                                 .emphasis = if (col >= scrollbar_starting_pos and col <= scrollbar_starting_pos + scrollbar_size)
                                     &.{} // scrollbar itself
+                                else if (this.configuration.show_background)
+                                    &.{.dim} // background (around scrollbar)
                                 else
-                                    &.{.dim}, // background (around scrollbar)
+                                    &.{.hidden}, // hide background
                             },
                             .cp = '🮄', // 5/8 block top (to make it look more equivalent to the vertical scrollbar)
                         };
@@ -1208,7 +1217,7 @@ test "scrollable vertical with scrollbar" {
     }, .{}));
     defer box.deinit();
 
-    var scrollable: Scrollable(Model, event.SystemEvent) = .init(box, .enabled(.white));
+    var scrollable: Scrollable(Model, event.SystemEvent) = .init(box, .enabled(.white, true));
 
     var container: Container(Model, event.SystemEvent) = try .init(allocator, .{
         .border = .{
@@ -1368,7 +1377,7 @@ test "scrollable horizontal with scrollbar" {
     }, .{}));
     defer box.deinit();
 
-    var scrollable: Scrollable(Model, event.SystemEvent) = .init(box, .enabled(.white));
+    var scrollable: Scrollable(Model, event.SystemEvent) = .init(box, .enabled(.white, true));
 
     var container: Container(Model, event.SystemEvent) = try .init(allocator, .{
         .border = .{