iOS Safari スクロールバーカスタマイズ

iPhoneやAndroidのサイトでスクロールバーをカスタマイズ | スターフィールド株式会社

http://sterfield.co.jp/designer/iphone%E3%82%84android%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA.html




.element{ /* 対象となる要素のクラス名が"element"の場合 */
overflow: auto;
}
.element::-webkit-scrollbar{ /* スクロールバー本体 */
width: 5px;
background: #9aadfc;
}
.element::-webkit-scrollbar:horizontal{ /* 横方向のスクロールバー本体 */
width: 5px;
background: #9aadfc;
}
.element::-webkit-scrollbar-thumb{ /* スクロールバーの動く部分 */
background: #435295;
border-radius: 2px;
}
.element::-webkit-scrollbar-thumb:horizontal{ /* 横方向のスクロールバーの動く部分 */
background: #435295;
border-radius: 2px;
}
.element::-webkit-scrollbar-track-piece:start{ /* スクロールバーの動く部分の前 */
background: #9aadfc;
}
.element::-webkit-scrollbar-track-piece:end{ /* スクロールバーの動く部分の後ろ */
background: #a3d2a0;
}
.element::-webkit-scrollbar-corner{ /* スクロールバー角 */
background: transparent;
}

なめらかスクロールは、以下のようします。

-webkit-overflow-scrolling: touch

-webkit-overflow-scrolling に指定する値は「auto」と「touch」の2 つです。

「auto」はデフォルトで、慣性スクロールしません。

ただ、慣性スクロールさせると、スクロールバーデザインのカスタマイズが無効になってしまいます。

同時には使えないようです。

例

.content {

    height: 200px;

    overflow: scroll;

    -webkit-overflow-scrolling: touch

}

iPhone3GS、iPhone4など で動きがガタツク場合

GPUアクセラレーションを効かせるために、以下の指定を入れると良いようです。

div.contents-ga-overflow-suruyo > * {

    -webkit-transform: translateZ(0px);

}