スクロールバーMacOSではCSSボタンが表示されませんか？

私のコードを見て、私のボタンがMacOSのスクロールバーに表示されない理由を教えてください。彼らはWindowsで動作しますか、スペルミスなどを見逃しているのでしょうか？スクロールバーMacOSではCSSボタンが表示されませんか？

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

私はちょうど窓の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); 
}

ここで1つのセレクタの両方で: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

スクロールバーMacOSではCSSボタンが表示されませんか？

答えて

関連する問題