모바일 브라우저에서 스크롤 막대 표시

이 질문은 "overflow:auto" 또는 "를 사용할 때 모바일 브라우저에서 숨겨진 스크롤 막대 문제에 중점을 둡니다. 스크롤 가능한 콘텐츠의 경우 Overflow:visible"입니다. 스크롤바는 데스크톱 브라우저에 표시되지만 적극적으로 스크롤하지 않으면 모바일 장치에서는 사라집니다.

이 문제를 해결하려면 CSS를 수정하여 Webkit 브라우저 엔진에 특정한 다음 코드를 포함할 수 있습니다.

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

이 코드는 너비, 높이, 썸 색상 및 트랙 색상을 포함하여 스크롤바의 모양을 정의합니다. 이러한 속성을 사용자 정의하면 스크롤하기 전에도 스크롤바가 모바일 장치에 항상 표시되도록 할 수 있습니다.