scroll {
  background: yellow;
}

scroll button {
  width:  60;
  height: 60;
}

scroll#horizontal {
  top:      80;
  left:     10;
  height:   60;
  width:    300;
  overflow: x;
}

scroll#horizontal button {
  display:      inline;
  height:       100%;
  margin-right: 2;
}

scroll#vertical {
  top:      150;
  left:     10;
  width:    60;
  height:   400;
  overflow: y;
}
scroll#vertical button {
  width:  100%;
  height: 58px;
}
scroll#vertical button.b0 { top: 0;   }
scroll#vertical button.b1 { top: 60;  }
scroll#vertical button.b2 { top: 120; }
scroll#vertical button.b3 { top: 180; }
scroll#vertical button.b4 { top: 240; }
scroll#vertical button.b5 { top: 300; }
scroll#vertical button.b6 { top: 360; }
scroll#vertical button.b7 { top: 420; }
scroll#vertical button.b8 { top: 480; }
scroll#vertical button.b9 { top: 540; }

scroll#both {
  top:      150;
  left:     80;
  width:    230;
  height:   400;
  overflow: visible;
}
scroll#both button {
  width:  58;
  height: 58;
}
scroll#both button.b0 { top: 0;   left: 0;   }
scroll#both button.b1 { top: 60;  left: 60;  }
scroll#both button.b2 { top: 120; left: 120; }
scroll#both button.b3 { top: 180; left: 180; }
scroll#both button.b4 { top: 240; left: 240; }
scroll#both button.b5 { top: 300; left: 300; }
scroll#both button.b6 { top: 360; left: 360; }
scroll#both button.b7 { top: 420; left: 420; }
scroll#both button.b8 { top: 480; left: 480; }
scroll#both button.b9 { top: 540; left: 540; }