스크롤바 스타일 문제를 해결하는 방법

많은 동료들이 다양한 브라우저의 스크롤 막대 스타일로 인해 혼란스러워했으며, 다양한 브라우저의 기본 스크롤 막대 스타일이 일관되지 않습니다. 스크롤바 스타일을 수정하는 것에 대해 인터넷에 많은 의견이 있지만 대부분은 피상적입니다. 오늘은 실용적인 정보, 순수한 실용적인 정보에 대해서만 이야기하겠습니다. 실용적인 정보는 동료 중 한 사람의 추천에서 나온 것입니다.

1단계: style 태그에 다음 코드를 삽입해야 합니다

/* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
    }
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

2단계: 컨테이너에 스타일을 추가합니다

overflow:auto; 또는 Overflow-x:auto;)

효과는 따로 올리지 않을테니 그 기적의 순간을 직접 확인해보세요! 안되면 벽돌이라도 떨어뜨리세요~

위 내용은 스크롤바 스타일 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!