>  기사  >  웹 프론트엔드  >  스크롤바 스타일 문제를 해결하는 방법

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

一个新手
一个新手원래의
2018-05-15 14:35:092599검색

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

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

/* 设置滚动条的样式 */
    ::-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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.