모바일 브라우저에서 스크롤바를 표시하려면 어떻게 해야 합니까?

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

웹 개발에서는 콘텐츠가 보이지 않을 때에도 모바일 브라우저에 스크롤바를 표시하는 것이 바람직한 경우가 많습니다. 처음에는 스크롤되었습니다. "overflow:auto" 또는 "overflow:visible"과 같은 CSS 속성을 사용하면 데스크톱 브라우저에서 이를 달성할 수 있지만 모바일 브라우저는 스크롤을 시도할 때까지 스크롤 막대를 숨기는 경향이 있습니다.

이 문제를 해결하려면 다음을 사용하여 CSS를 향상할 수 있습니다. 다음 웹킷 관련 속성:

::-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;
}

이 코드는 스크롤 막대의 모양을 수정하여 스크롤 막대를 표시하고 너비와 모양을 조정합니다. 이러한 속성을 적용하면 데스크톱과 모바일 기기 모두에서 스크롤바가 일관되게 표시되어 사용자 경험이 향상됩니다.

위 내용은 모바일 브라우저에서 스크롤바를 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!