스크롤 막대 CSS가 MacOS에 표시되지 않습니까?

누군가 내 코드를보고 내 버튼이 내 스크롤바에 MacOS에 표시되지 않는 이유를 말해 줄 수 있습니까? 그들은 Windows에서 작동합니다. 아마도 맞춤법 오류 또는 뭔가를 놓칠 것입니까?스크롤 막대 CSS가 MacOS에 표시되지 않습니까?

::-webkit-scrollbar { 
    width: 8px; 
} 

::-webkit-scrollbar-track { 
    background:#eee; 
    border: thin solid lightgray; 
    box-shadow: 0px 0px 3px #dfdfdf inset; 
    border-radius:10px; 
} 
::-webkit-scrollbar-thumb:horizontal { 
    background:#4B6A89; 
    border: thin solid #4B6A89; 
    border-radius:10px; 
    height: 8px; 
} 
::-webkit-scrollbar-thumb:vertical { 
    background:#A1A7AC; 
    border: thin solid #dfdfdf; 
    border-radius:10px; 
} 
::-webkit-scrollbar-thumb:hover { 
    background:#4B6A89; 
} 
::-webkit-scrollbar-button:horizontal:increment { 
    background-image: url(http://i.imgur.com/rwmYdPk.png); 
} 
::-webkit-scrollbar-button:horizontal:decrement { 
    background-image: url(http://i.imgur.com/VAvOauT.png); 
}

출처

2016-12-20 IWI

어떤 브라우저 및 OS? 일부 플랫폼의 일부 브라우저에는 더 이상 스크롤 막대 단추가 없습니다. 가장 주목할만한 macOS. –

크롬 on osx sierra – IWI

방금 Windows PC에 사이트를 열었고 아이콘을 볼 수 있습니다 ... 답변을 주셔서 감사합니다. 부끄러운 줄 알아. – IWI

macOS에서는 기본적으로 스크롤 막대가 숨겨져 있습니다. 그들을 볼 수 있도록, 당신은 그들에게 display: block;을해야합니다

::-webkit-scrollbar-button:horizontal:increment { 
    display: block; 
    background-image: url(http://i.imgur.com/rwmYdPk.png); 
} 
::-webkit-scrollbar-button:horizontal:decrement { 
    display: block; 
    background-image: url(http://i.imgur.com/VAvOauT.png); 
}

다음은 중복 제거 버튼을 하나 개 선택에서 모두 :start 및 :end 버튼을 대상으로, 작동하는 예입니다.

::-webkit-scrollbar { 
 
    width: 8px; 
 
} 
 

 
::-webkit-scrollbar-track { 
 
    background:#eee; 
 
    border: thin solid lightgray; 
 
    box-shadow: 0px 0px 3px #dfdfdf inset; 
 
    border-radius:10px; 
 
} 
 
::-webkit-scrollbar-thumb:horizontal { 
 
    background:#4B6A89; 
 
    border: thin solid #4B6A89; 
 
    border-radius:10px; 
 
    height: 8px; 
 
} 
 
::-webkit-scrollbar-thumb:vertical { 
 
    background:#A1A7AC; 
 
    border: thin solid #dfdfdf; 
 
    border-radius:10px; 
 
} 
 
::-webkit-scrollbar-thumb:hover { 
 
    background:#4B6A89; 
 
} 
 
::-webkit-scrollbar-button:horizontal:end:increment { 
 
    background-image: url(http://i.imgur.com/rwmYdPk.png); 
 
} 
 
::-webkit-scrollbar-button:horizontal:start:decrement { 
 
    background-image: url(http://i.imgur.com/VAvOauT.png); 
 
} 
 
::-webkit-scrollbar-button:horizontal:end:increment, 
 
::-webkit-scrollbar-button:horizontal:start:decrement { 
 
    display: block; 
 
} 
 

 
# Working Example (requires supported browser):

<div style="width: 200px; height: 200px; overflow: auto;"> 
 
    <p style="width: 150%;">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<p> 
 
</div>

출처

2016-12-20 18:57:04

완벽. 실제로 CSS가 OS 동작을 무시할 수 있다고 생각하지 못했습니다. – Alvaro

굉장합니다. 감사! 스크롤바 양쪽에 두 개의 화살표가 보입니다. 그것을 고칠 수있는 방법이 있습니까? – IWI

@IWI 아마 내가 알아낼 수 있는지 보자. –

OSX 스크롤 막대에는 단추가 없습니다. 그래서 OSX에서 볼 수없고 Windows에서 볼 수 있습니다.

출처

2016-12-20 18:54:01 Alvaro

스크롤 막대 CSS가 MacOS에 표시되지 않습니까?

답변

관련 문제