코드 블록에 오버레이를 추가하여 사용자가 클릭할 때까지 스크롤을 방지하는 방법

안녕하세요 :wave:

코드 블록이 매우 길 수 있습니다. 예를 들어, 전체 빌드 로그나 기타 긴 텍스트가 포함된 경우 등이 그렇습니다… 게시물의 코드 블록 섹션에서 스크롤하거나, 특히 작은 화면 크기에서 코드 블록의 끝까지 스크롤하는 것이 그리 쉽지 않습니다. 가장 쉬운 방법은 코드 블록 앞의 더 큰 요소를 스크롤하거나, 측면의 10px 영역을 찾아 스크롤하는 것입니다.

거대한 코드 블록에 오버레이를 추가하여 사용자 상호작용이 있을 때까지 스크롤을 방지하는 것이 좋은 옵션이 될 것입니다. 사용자가 클릭하면 오버레이가 사라지고 스크롤이 활성화됩니다.

감사합니다 :slightly_smiling_face:

1개의 좋아요

테마 컴포넌트에서 시도해 볼래요? 어떤 느낌인지 느껴지나요?

2개의 좋아요

네, 생각해 봤어요. 컴포넌트로 하면 충분히 가능할 것 같아요. 한번 시도해 볼게요. :slightly_smiling_face:

1개의 좋아요

안녕하세요 :waving_hand:

이것은 첫 번째 버전입니다. 저는 이런 걸 염두에 두고 있었지만, 요소 높이를 정의하는 데 막혀 있습니다. :confused: 오버레이는 스크롤 가능한 코드 블록에서만 표시되어야 합니다. element.scrollHeight > n 등으로 시도해 봤는데, 높이가 항상 0으로 반환되는 것 같습니다. 코드 블록이 스크롤 가능한지 여부를 정의하는 다른 방법을 찾아야 합니다…

1개의 좋아요

안녕하세요 :wave:

오랜만에 다시 돌아왔습니다… 이걸 완전히 잊고 있었네요. 이제 제대로 작동하는 것을 만들었습니다. :smile:

1개의 좋아요