2011-06-27 4 views
0

は、私はこの1つAppleのようJavascriptのスライダー

http://itunes.apple.com/us/app/sparrow/id417250177?mt=12(スクリーンショット上)

http://storymatters.com/showcase/there-is-an-app-for-that#slideshowWrap

アイデアのようなスライダーがありますか?

WebKitのブラウザ上で動作するだけのカスタムスクロールバーの
+1

JavaScriptを使用しないと、Appleはstorymatters.comと比較してひどく劣化しますが、ストーリーマターをエミュレートする方が良いでしょう。これは、スクロールバーにカスタムHTMLを書き込むことです。 – Robert

+1

ここにコードを請求しているかどうかわかりません。しかし、私は誰もがここで解決策だとは思わないと思う。私はあなたがコードを書くことを開始してそれを置くべきだと思います。 –

+0

スライダーをドラッグしようとするとストーリータッターが壊れます(「画像をドラッグしようとしています」という効果があります)。私は一度良いスクロールバーの交換を見たことはありません - 常に壊れているか不足しているものがあります。提案:代わりに実際のブラウザのスクロールバーを使用してください。 – James

答えて

0

:ここhttp://css-tricks.com/examples/WebKitScrollbars/は...

html { 
    overflow: auto; 
} 
body { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    bottom: 20px; 
    right: 20px; 
    padding: 30px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

/* Let's get this party started */ 
::-webkit-scrollbar { 
    width: 12px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,0.4); 
} 

IEがあまりにも、のようにカスタマイズできないもののスタイルスクロールバーへの道を持っている例だ

body { 
    scrollbar-arrow-color:#ffffff; 
    scrollbar-base-color: #ffffff; 
    scrollbar-dark-shadow-color:#ffffff; 
    scrollbar-track-color:#ffffff; 
    scrollbar-face-color:#ffffff; 
    scrollbar-shadow-color:#ffffff; 
    scrollbar-highlight-color:#ffffff; 
    scrollbar-3d-light-color:#ffffff; 
} 

だから、これがブラウザ間で動作するようにしたいのであれば、あなたは不運になります。

+0

アップルがJavaScriptと画像を使用しています、ストーリーマターはWebkitバージョンを使用しています、それはappersです – Robert

関連する問題