Scrollable Map Sidebar en

Installations 64 Likes 8

This theme is now deprecated and its functionality has been merged into Map Sidebar Optimization.

This theme modifies the default scrolling behaviour in four ways:

Uses a thin scrollbar rather than a wide one (thickness and colours are customizable).
Optimizes the wasted space at the top and bottom, and between some elements.
Pins the following elements to the bottom regardless of scrolling: "Back to (Map Name)" button, in the default (legend) pane; "Remove" button, in the marker pane.
Fixes a display bug that causes a scrollbar to appear in the main map container.

Customization

Note that depending on your browser and OS settings, the scrollbar may be more or less invisible at first. You can customize the scrollbar’s colours by adding the following rules to your campaign’s CSS (the first property sets the track, or gutter, and the second sets the slider, or handle):

#map-body {
  --map-sidedar-scrollbar-track-color: slategrey;
  --map-sidedar-scrollbar-slider-color: whitesmoke;
}

You can do the same for the scrollbar’s width (thin or auto) using the following properties:

#map-body {
  --map-sidedar-scrollbar-width: thin;
}

However, those properties are still not supported on Safari as of early 2025.

More sidebar goodness

This theme can be used alongside either of Scrollable Main Sidebar or Pop-Out Sidebar and pairs well with Map Sidebar Legibility Upgrades.

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):

New update!

Latest version EOL View content

Released 1 week ago

Kanka 2.9’s changes to the sidebar have made this theme largely obsolete. Its scrollbar customization options have been moved to my Map Sidebar Optimization theme, along with the sticky Back/Remove buttons at the bottom. These are still present here, but expect this plugin to be deleted eventually rather than keeping both up to date.

Plugin CSS for EOL


/* BEGIN Scrollable Map Sidebar by Salvatos */
.main-sidebar {
	--map-sidebar-scrollbar-track-color: auto;
	--map-sidebar-scrollbar-slider-color: auto;
	--map-sidebar-scrollbar-width: thin;
}
@media (min-width:768px) {
	#map-body {
		/* Prevent scrollbar in main pane */
		#sidebar-map, .main-sidebar {
			max-height: calc(100vh - 3.1rem);
		}

		/* Scrollbar width and colors */
		#sidebar-content {
			scrollbar-width: var(--map-sidebar-scrollbar-width);
			scrollbar-color: var(--map-sidebar-scrollbar-slider-color) var(--map-sidebar-scrollbar-track-color);
		}
		/* Webkit patch */
		#sidebar-content::-webkit-scrollbar {
			background-color: var(--map-sidebar-scrollbar-track-color);
		}
		#sidebar-content::-webkit-scrollbar-thumb {
			background-color: var(--map-sidebar-scrollbar-slider-color);
		}

		/* Legend spacing */
		#sidebar-map {
			.marker-actions {
				padding-block: 1em;
			}
			.map-legend:not(:last-child) {
				padding: 0 10px;
			}
		}

		/* Sticky Back/Remove button */
		.map-legend:last-child,
		.marker-header ~ div .marker-actions {
			position: sticky;
			bottom: 0px;
			margin: 0;
			padding: 10px 0px;
			background: var(--sidebar-background, hsl(var(--si)));
		}
		.marker-header + .gap-3 {
			gap: unset;
		}
	}
}
/* END Scrollable Map Sidebar by Salvatos */