svg custom scrollbar

Sasuke Uchihas answered on January 27, 2025 Popularity 1/10 Helpfulness 1/10

answer svg custom scrollbar

svg custom scrollbar

Comment

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG Custom Scrollbar with GSAP</title>
    <style>
      ::-webkit-scrollbar {
        width: 0px;
      }

      body {
        margin: 0;
        padding: 0;
        height: auto; /* Make the page scrollable */
        overflow: auto; /* Hide the default scrollbar */
        position: relative;
      }

      section {
        height: 100vh;
      }

      .scrollbar-container {
        position: fixed;
        top: 0px;
        right: 5px;
        width: 10px;
        height: 100%;
        background-color: transparent;
        transform-box: fill-box;
        transform-origin: center;
        transform: scaleY(0.97);
        border-radius: 30px;
      }

      svg {
        position: absolute;
        top: 0px;
        right: 0;
        transform-box: fill-box;
        transform-origin: center;
        border-radius: 30px;
      }

      .scrollbar-thumb {
        fill: #3498db;
        cursor: pointer; /* Change cursor to indicate it's draggable */
      }
    </style>
  </head>
  <body>
    <section>
      <h1>HELLO PAGE 1</h1>
    </section>
    <section>
      <h1>HELLO PAGE 2</h1>
    </section>
    <section>
      <h1>HELLO PAGE 3</h1>
    </section>
    <div class="scrollbar-container">
      <svg width="10" height="100%" xmlns="http://www.w3.org/2000/svg">
        <rect
          class="scrollbar-thumb"
          x="0"
          y="0"
          width="10"
          height="50"
          rx="5"
          ry="5"
        />
      </svg>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
    <script>
      const thumb = document.querySelector('.scrollbar-thumb');
      const body = document.body;

      const scrollHeight = body.scrollHeight - window.innerHeight; // Total scrollable height
      const scrollbarHeight = (window.innerHeight / body.scrollHeight) * 100; // Percentage of visible area

      // Set the thumb height based on the ratio of visible content vs total scrollable content
      gsap.set(thumb, {
        attr: { height: scrollbarHeight + '%' },
      });

      // Update the thumb's position as we scroll
      window.addEventListener('scroll', () => {
        const scrollPercentage = window.scrollY / scrollHeight; // Ratio of how much user has scrolled
        gsap.to(thumb, {
          y:
            scrollPercentage *
            (window.innerHeight - thumb.getBoundingClientRect().height), // Thumb movement
          ease: 'none', // No easing, just linear movement
        });
      });

      // Dragging functionality
      let isDragging = false;
      let startY, startScrollTop;

      thumb.addEventListener('mousedown', (e) => {
        isDragging = true;
        startY = e.clientY;
        startScrollTop = window.scrollY;
        document.body.style.userSelect = 'none'; // Prevent text selection while dragging
      });

      document.addEventListener('mousemove', (e) => {
        if (isDragging) {
          const diff = e.clientY - startY;
          const scrollY =
            startScrollTop +
            (diff /
              (window.innerHeight - thumb.getBoundingClientRect().height)) *
              scrollHeight;
          window.scrollTo(0, scrollY);
        }
      });

      document.addEventListener('mouseup', () => {
        isDragging = false;
        document.body.style.userSelect = ''; // Re-enable text selection
      });
    </script>
  </body>
</html>

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: scrollbar svg whatever

Link to this answer
Share Copy Link

Contributed on Jan 27 2025

Sasuke Uchihas

0 Answers Avg Quality 2/10

svg custom scrollbar

Contents

More Related Answers

svg custom scrollbar

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.