CSS animation-timeline — 스크롤 오버플로우를 감지해 Border-Radius 동적 조절하기

.code-block {
  overflow: auto;
  border-radius: 1.5rem; /* 기본값: 큰 곡률 */
 
  /* X축과 Y축 스크롤을 별도로 감지 */
  animation:
    detect-overflow-x steps(1) both,
    detect-overflow-y steps(1) both;
 
  animation-timeline:
    scroll(x self),  /* X축 스크롤 */
    scroll(y self);  /* Y축 스크롤 */
 
  /* 스크롤 범위: 1px만 스크롤 가능해도 감지 */
  animation-range: 0px 1px;
}

@keyframes detect-overflow-x {
  from { --overflows-x: 0; }
  to   { --overflows-x: 1; }
}
 
@keyframes detect-overflow-y {
  from { --overflows-y: 0; }
  to   { --overflows-y: 1; }
}
 
/* 정수형으로 등록해야 계산에서 사용 가능 */
@property --overflows-x {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
 
@property --overflows-y {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

.code-block {
  --r: 1.5rem;    /* 기본 곡률 */
  --s: 1.2rem;    /* 스크롤바가 있을 때 줄이는 양 */
 
  border-top-left-radius: var(--r);
  border-top-right-radius: calc(
    var(--r) - var(--overflows-y, 0) * var(--s)
  );
  border-bottom-right-radius: calc(
    var(--r) - max(var(--overflows-x, 0), var(--overflows-y, 0)) * var(--s)
  );
  border-bottom-left-radius: calc(
    var(--r) - var(--overflows-x, 0) * var(--s)
  );
}

@property --overflows-x {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
 
@property --overflows-y {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
 
@keyframes detect-overflow-x {
  from { --overflows-x: 0; }
  to   { --overflows-x: 1; }
}
 
@keyframes detect-overflow-y {
  from { --overflows-y: 0; }
  to   { --overflows-y: 1; }
}
 
.code-block {
  --r: 1.5rem;
  --s: 1.2rem;
 
  overflow: auto;
  padding: 1.5rem;
  background: #1e1e2e;
 
  border-top-left-radius: var(--r);
  border-top-right-radius: calc(var(--r) - var(--overflows-y) * var(--s));
  border-bottom-right-radius: calc(var(--r) - max(var(--overflows-x), var(--overflows-y)) * var(--s));
  border-bottom-left-radius: calc(var(--r) - var(--overflows-x) * var(--s));
 
  animation:
    detect-overflow-x steps(1) both,
    detect-overflow-y steps(1) both;
  animation-timeline:
    scroll(x self),
    scroll(y self);
  animation-range: 0px 1px;
}

.code-block {
  /* 폴백: 모든 브라우저에서 안전한 작은 곡률 */
  border-radius: 0.5rem;
}
 
@supports (animation-timeline: scroll()) {
  .code-block {
    /* 스마트 border-radius 적용 */
    border-radius: unset;
    border-top-left-radius: var(--r);
    /* ... 나머지 설정 */
  }
}