diff --git a/res/css/structures/_AutoHideScrollbar.scss b/res/css/structures/_AutoHideScrollbar.scss
index 60aea7ce8f..cb0d6f7f09 100644
--- a/res/css/structures/_AutoHideScrollbar.scss
+++ b/res/css/structures/_AutoHideScrollbar.scss
@@ -64,3 +64,20 @@ body.mx_scrollbar_nooverlay {
         margin-right: calc(-1 * var(--scrollbar-width));
     }
 }
+
+// style the native scrollbars ...
+// ... standard css scrollbars (firefox at time of writing)
+.mx_AutoHideScrollbar {
+    scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
+    scrollbar-width: thin;
+}
+// or fallback for webkit browsers
+::-webkit-scrollbar {
+    width: 6px;
+    background-color: $scrollbar-track-color;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: $scrollbar-thumb-color;
+    border-radius: 3px;
+}
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 0afa6a91e1..ee5e1cf5d6 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -74,7 +74,9 @@ $strong-input-border-color: #656565;
 // used for UserSettings EditableText
 $input-underline-color: $primary-fg-color;
 $input-fg-color: $primary-fg-color;
-
+// scrollbars
+$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
+$scrollbar-track-color: transparent;
 // context menus
 $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #373737;
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index 940e26a1a2..dccad9b6ef 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -86,7 +86,9 @@ $strong-input-border-color: #c7c7c7;
 // used for UserSettings EditableText
 $input-underline-color: rgba(151, 151, 151, 0.5);
 $input-fg-color: rgba(74, 74, 74, 0.9);
-
+// scrollbars
+$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
+$scrollbar-track-color: transparent;
 // context menus
 $menu-border-color: #ebedf8;
 $menu-bg-color: #fff;
diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
index 6871ec8d6c..7136b8834a 100644
--- a/res/themes/light/css/_base.scss
+++ b/res/themes/light/css/_base.scss
@@ -83,7 +83,9 @@ $field-focused-label-bg-color: #ffffff;
 // used for UserSettings EditableText
 $input-underline-color: rgba(151, 151, 151, 0.5);
 $input-fg-color: rgba(74, 74, 74, 0.9);
-
+// scrollbars
+$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
+$scrollbar-track-color: transparent;
 // context menus
 $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #f6f6f6;
diff --git a/src/components/structures/AutoHideScrollbar.js b/src/components/structures/AutoHideScrollbar.js
index 47ae24ba0f..a8fccec08e 100644
--- a/src/components/structures/AutoHideScrollbar.js
+++ b/src/components/structures/AutoHideScrollbar.js
@@ -20,6 +20,7 @@ import React from "react";
 // Copyright (c) Noel Delgado <pixelia.me@gmail.com> (pixelia.me)
 function getScrollbarWidth(alternativeOverflow) {
     const div = document.createElement('div');
+    div.className = 'mx_AutoHideScrollbar'; //to get width of css scrollbar
     div.style.position = 'absolute';
     div.style.top = '-9999px';
     div.style.width = '100px';