Webkit のスクロールバー

KABA

License: MIT License

Fork
0
Fav
1
View
2778
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 0 lines
  • HTML 113 lines
  • CSS 76 lines
Webkit のスクロールバーは矢印を CSS で設定出来ない模様。
面倒なので SVG 画像を埋め込みました。色も SVG の記述部分で変更可能です。
(この部分 → "…fill=%22#fff…" )


【参考ページ】

▼ スクロールバー
▽ Custom Scrollbars in WebKit | CSS-Tricks
http://css-tricks.com/custom-scrollbars-in-webkit/

▽ WebKitを使ってスクロールバーをカスタマイズ | CSSPRO
http://csspro.digitalskill.jp/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/webkit-%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3/

▽ Coffee Powered » Sexy CSS Scrollbars in Chrome
http://www.coffeepowered.net/2011/06/17/sexy-css-scrollbars/

▽ Surfin' Safari / Blog Archive » Styling Scrollbars
https://www.webkit.org/blog/363/styling-scrollbars/

▽ スクロールバーをデザインする ::-webkit-scrollbar に関しての覚え書き | Unformed Building
http://unformedbuilding.com/articles/learn-about-webkit-scrollbar/


▼ SVG 画像
▽ SVG Gradient をSASS (LESS) で生成して CSS Gradient として扱う mixin | ヨモツネット
http://www.yomotsu.net/wp/?p=598

▽ svgリファレンス
http://king-of-bb.jp/svg/
# アスベクト比の項、"preserveAspectRatio"を使用


▼ Tool
▽ text URI encoder / decoder / jsdo.it
http://jsdo.it/KABA/URIencoder/fullscreen
# SVG 画像のエンコード / デコード用

  • Webkit のスクロールバー
  • Webkit のスクロールバー

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

KABA

Author

自分ライブラリを構築してます。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by