feat: add preview for scrollbar generator (#567)

Author: Bridgetamana

index.html

@@ -1334,6 +1334,30 @@ <h1>Input Range</h1>
 
           <!-- Custom Scroll Generator -->
           <div data-content="scroll">
+            <!-- custom scroll generator -->
+            <h2>Preview</h2>
+            <br />
+            <div id="scroll-preview">
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                sunt in culpa qui officia deserunt mollit anim id est laborum.
+              </p>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                sunt in culpa qui officia deserunt mollit anim id est laborum.
+              </p>
+            </div>
+            <br />
             <div class="input">
               <label for="color" class="color">
                 Track Color

src/lib/getElements.ts

@@ -204,3 +204,6 @@ export const getGridFields = (
 
 export const getGridPreview = (attribute: string): HTMLElement =>
   document.getElementById(`${attribute}-preview`) as HTMLElement;
+
+export const getScrollPreview = (): HTMLElement =>
+  document.getElementById('scroll-preview') as HTMLElement;

src/pages/scroll.ts

@@ -5,6 +5,7 @@ import {
   getCopyCodeButton,
   getCssOrTailwindButton,
   getCssOrTailwindDropdown,
+  getScrollPreview,
 } from '../lib/getElements';
 import {closeDropdown, showPopup} from '../lib/packages/utils';
 
@@ -83,6 +84,61 @@ function copyHandler(values: Values) {
 }
 
 export function scrollGenerator() {
+  const previewElement = getScrollPreview();
+
+  function applyPreviewStyles(values: Values) {
+    if (!previewElement) return;
+
+    // Apply styles directly to the preview element
+    previewElement.style.setProperty('--scrollbar-width', `${values.width}px`);
+    previewElement.style.setProperty(
+      '--scrollbar-track-color',
+      values.trackColor
+    );
+    previewElement.style.setProperty(
+      '--scrollbar-thumb-color',
+      values.thumbColor
+    );
+    previewElement.style.setProperty(
+      '--scrollbar-thumb-hover-color',
+      values.hoverColor
+    );
+
+    const styleTag = document.createElement('style');
+    styleTag.id = 'scroll-preview-style';
+    styleTag.innerHTML = `
+      #scroll-preview::-webkit-scrollbar {
+        width: var(--scrollbar-width);
+      }
+      #scroll-preview::-webkit-scrollbar-track {
+        box-shadow: inset 0 0 5px var(--scrollbar-track-color);
+      }
+      #scroll-preview::-webkit-scrollbar-thumb {
+        background: var(--scrollbar-thumb-color);
+      }
+      #scroll-preview::-webkit-scrollbar-thumb:hover {
+        background: var(--scrollbar-thumb-hover-color);
+      }
+    `;
+
+    document.head.appendChild(styleTag);
+  }
+
+  function updatePreview() {
+    applyPreviewStyles({
+      trackColor: trackColor.value,
+      thumbColor: thumbColor.value,
+      hoverColor: hoverColor.value,
+      width: width.value,
+    });
+  }
+
+  [trackColor, thumbColor, hoverColor, width].forEach((input) => {
+    input?.addEventListener('input', updatePreview);
+  });
+
+  updatePreview();
+
   getCodeButton?.addEventListener('click', () =>
     copyHandler({
       trackColor: trackColor.value,

src/style.css

@@ -1241,6 +1241,14 @@ input[type='range']:focus::-moz-range-thumb {
   color: var(--text-color);
 }
 
+#scroll-preview {
+  width: 300px;
+  height: 200px;
+  overflow-y: scroll;
+  border: 1px solid var(--text-color);
+  padding: 12px;
+}
+
 /* FOOTER SECTION */
 
 footer {