From 5a37073a65473dcc35c098163683641734bbb1ff Mon Sep 17 00:00:00 2001
From: PMKuipers <pm@miqra.nl>
Date: Fri, 7 Jul 2023 17:22:48 +0200
Subject: [PATCH] Added scrollbar styling

---
 README.md | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b2b9a73..490b703 100644
--- a/README.md
+++ b/README.md
@@ -23,5 +23,36 @@ Manage Study plans|/local/treestudyplan/edit-plan.php||en
 ```
 
 ## Dev Notepad
+### Size matching and grid view
 Link to jsfiddle for size matching with different scroll area (frozen line headings): https://jsfiddle.net/pmkuipers/sfweghr1/4/
-Use proper grid styling for column resizing (see same fiddle)
\ No newline at end of file
+Use proper grid styling for column resizing (see same fiddle)
+
+
+### Scroll bar syling
+example style with cross-browser support
+```
+:root{
+  --primary: #006DDD;
+ 
+}
+div.scroll {
+	height: 50em;
+	overflow-y: scroll;
+  	scrollbar-color: var(--primary) color-mix(in srgb, var(--primary) 20%, white);
+  	scrollbar-width: thin;
+}
+div.scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+/* Track */
+div.scroll::-webkit-scrollbar-track {
+  background:  color-mix(in srgb, var(--primary) 20%, white);
+}
+ 
+/* Handle */
+div.scroll::-webkit-scrollbar-thumb {
+  background:var(--primary); 
+}
+
+```
\ No newline at end of file