From 1cd27312fd390b9cc69722895bbe88fbb3bd1572 Mon Sep 17 00:00:00 2001
From: Julien Marcou <julien.marcou.dev@gmail.com>
Date: Sun, 31 Jan 2021 17:52:53 +0100
Subject: [PATCH] Add HTML attributes to control scrollbar positions

---
 README.md | 16 ++++++++++++++++
 index.js  | 26 +++++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 27fd3ee..c5472a0 100644
--- a/README.md
+++ b/README.md
@@ -100,6 +100,22 @@ You can force the scrollbar to always be visible by setting the `scrollbar-visib
 </scrollable-component>
 ```
 
+You can put the vertical scrollbar on the left of the viewport by setting the `vertical-scrollbar-position` attribute to `left`
+
+```html
+<scrollable-component vertical-scrollbar-position="left">
+    <!-- Your content -->
+</scrollable-component>
+```
+
+You can put the horizontal scrollbar on the top of the viewport by setting the `horizontal-scrollbar-position` attribute to `top`
+
+```html
+<scrollable-component horizontal-scrollbar-position="top">
+    <!-- Your content -->
+</scrollable-component>
+```
+
 You can change the transitions, the scrolling behaviors and the look of the scrollbars using CSS properties
 
 ```css
diff --git a/index.js b/index.js
index e43a63e..c43f403 100644
--- a/index.js
+++ b/index.js
@@ -109,6 +109,10 @@ scrollableComponentTemplate.innerHTML = `
       background: var(--scrollbar-fill-color) var(--vertical-scrollbar-background);
       background-size: var(--vertical-scrollbar-background-size);
     }
+    .vertical-scrollbar.left-position {
+      left: 0;
+      right: auto;
+    }
     .horizontal-scrollbar {
       z-index: 10;
       height: var(--scrollbar-width);
@@ -118,6 +122,10 @@ scrollableComponentTemplate.innerHTML = `
       background: var(--scrollbar-fill-color) var(--horizontal-scrollbar-background);
       background-size: var(--horizontal-scrollbar-background-size);
     }
+    .horizontal-scrollbar.top-position {
+      top: 0;
+      bottom: auto;
+    }
     .scrollbar:hover,
     .scrollbar.scrolling-with-thumb,
     .viewport:hover ~ .scrollbar,
@@ -373,10 +381,26 @@ export class ScrollableComponentElement extends HTMLElement {
         this.viewport.classList.remove('scrollbar-visible');
       }
     }
+    else if (attributeName === 'vertical-scrollbar-position') {
+      if (newValue === 'left') {
+        this.elements.vertical.scrollbar.classList.add('left-position');
+      }
+      else {
+        this.elements.vertical.scrollbar.classList.remove('left-position');
+      }
+    }
+    else if (attributeName === 'horizontal-scrollbar-position') {
+      if (newValue === 'top') {
+        this.elements.horizontal.scrollbar.classList.add('top-position');
+      }
+      else {
+        this.elements.horizontal.scrollbar.classList.remove('top-position');
+      }
+    }
   }
 
   static get observedAttributes() {
-    return ['scrollbar-visibility'];
+    return ['scrollbar-visibility', 'vertical-scrollbar-position', 'horizontal-scrollbar-position'];
   }
 
   updateCache(orientation) {