Twitterの会話インターフェースのような内側のスクロールバーのスタイリング？

Side panel scrollbar Twitterの会話インターフェースのような内側のスクロールバーのスタイリング？

ツイートをクリックするとサイドパネルにスクロールバーが表示され、ツイートに関連付けられた会話が十分に長くなります。

スクロールバーはどのように作成され、スタイリングされていますか？私は、彼らがjQueryプラグインや自身が作成したものを使用していると信じて

2011-10-10 Mattis

、唯一の仕事にそれは似たようなのですいずれかの方法WebKitブラウザ（これは単なる審美的なものなので大丈夫です）。

詳細については、このを見てみましょう：Apple-like scrollbars using CSS

私はツイッターを見、使用しているCSSを撮影した：Twitterのは、それを持っていたとしてhttp://jsbin.com/ubasew

#doc ::-webkit-scrollbar{width:9px;height:9px;} 
#doc ::-webkit-scrollbar-button:start:decrement,#doc ::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;} 
#doc ::-webkit-scrollbar-track-piece{background-color:#FAFAFA;-webkit-border-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;} 
#doc ::-webkit-scrollbar-thumb:vertical{height:50px;background-color:#999;-webkit-border-radius:8px;} 
#doc ::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:#999;-webkit-border-radius:8px;}

#docがあり、それがあります#doc内のスクロールバーのみがカスタマイズされます。

出典

2011-10-10 13:50:36 thirtydot

私はあなたの栄光の歓迎のスキルの輝きで頭を下げる:) – Mattis

これは、ユーザーのスクロールバーの幅の設定を無視します。それはかなりかもしれませんが、使い勝手が悪いです。小さなiframeやスクロール可能なdivでも問題ありませんが、ページ全体では使用しません。もしそうなら、少なくともスクロールバーをスクロールバーのように見せてください。ガターの色がページの背景と一致する場合、ユーザーは可視領域の最後まで到達し、ボタンが上に上がっているためスクロールバーがあることに気づいていないことがあります。 – Webveloper

はそのウェブキットだけですか？ – zx1986

、JScrollPaneに彼らは::-webkit-scrollbarと関連した擬似要素を使っている

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

出典

2011-10-10 13:38:34 Joe

これは、すべてのブラウザで機能するものが必要な場合にこれを行う方法ですが、Twitterが使用しているものではありません。 – thirtydot

ありがとうジョー、私は行くつもりの方向を把握します:) – Mattis

また、グーグルもGmailをチェックしてください – styler1972

Twitterの会話インターフェースのような内側のスクロールバーのスタイリング？

答えて

関連する問題