Scrollable Main Sidebar en

Installations 400 Likes 44

Sidebar

Makes the main sidebar independently scrollable and visible on-screen no matter how far down the page you are. Only applies to desktop view.

Customization

Note that depending on your browser and OS settings, the scrollbar may be more or less invisible at first. Whether or not this is the case, 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):

.main-sidebar {<br>  --sidedar-scrollbar-track-color: slategrey;<br>  --sidedar-scrollbar-slider-color: whitesmoke;
}

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

.main-sidebar {
  --sidedar-scrollbar-width: thin;
}

However, this property is only supported on Firefox and derivatives as of summer 2021.

Map behaviour

For similar behaviour in map Explore pages, please install Scrollable Map Sidebar alongside this plugin.

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

Menu remains fully visible at the bottom of a page

Latest version 1.12 View content

Released 1 year ago

Fixed menu height for Kanka 1.43.

Plugin CSS for 1.12


/* BEGIN Scrollable Main Sidebar */
.main-sidebar {
  --sidebar-scrollbar-track-color: auto;
  --sidebar-scrollbar-slider-color: auto;
  --sidebar-scrollbar-width: thin;
}
@media (min-width:768px) {
	.main-sidebar {
		position: fixed;
	}
	.main-sidebar .sidebar-menu {
		margin-bottom: 0;
	}
	/* Main site sidebar */
	body:not(#map-body) .main-sidebar .sidebar {
		height: calc(100vh - (160px + 50px) - 3rem) !important;
		padding-bottom: 1em;
		overflow-y: scroll;
		scrollbar-width: var(--sidebar-scrollbar-width);
		scrollbar-color: var(--sidebar-scrollbar-slider-color) var(--sidebar-scrollbar-track-color);
	}

	/* Webkit patch */
	body:not(#map-body) .main-sidebar .sidebar::-webkit-scrollbar {
		background-color: var(--sidebar-scrollbar-track-color);
	}
	body:not(#map-body) .main-sidebar .sidebar::-webkit-scrollbar-thumb {
		background-color: var(--sidebar-scrollbar-slider-color);
	}
}
/* END Scrollable Main Sidebar */