// Raphaël 라이브러리를 사용하여 캔버스 생성
var paper = Raphael("scroll-box", 200, 400);

// 스크롤 박스를 나타내는 사각형을 그립니다.
var scrollBox = paper.rect(10, 10, 180, 380);

// 스크롤 바를 나타내는 원을 그립니다.
var scrollBar = paper.circle(100, 40, 10);

// 스크롤 바를 드래그할 수 있도록 설정합니다.
scrollBar.attr({
  cursor: "move",
  fill: "#3366ff"
});

// 스크롤 바의 드래그 이벤트 처리를 설정합니다.
scrollBar.drag(function(dx, dy, x, y) {
  // 스크롤 바가 움직일 수 있는 범위를 제한합니다.
  var newY = this.oy + dy;
  if (newY >= 20 && newY <= 360) {
    this.attr({ cy: newY });
  }
}, function() {
  // 드래그 시작 시 초기 위치를 기억합니다.
  this.oy = this.attr("cy");
});

// 스크롤 박스와 스크롤 바의 연결을 나타내기 위해 선을 그립니다.
var line = paper.path("M100,10L100,400");
line.attr({ stroke: "#000000" });