iosアプリでスクロールできることを明示的にしたい。

Question

css/html/JSでiosアプリを作成しています。
デフォルトのスクロールのデザインが何も設定されていないので、
明示的にスクロールできることが分かるようにしたいです。
現在のコード(css)は下記です。

<div id="hoge" class="element"></div>

/* 表示範囲 */
#hoge{
    width:50%;
    height:100px;
    background:pink;
    bottom:0;
    left:0;
}

/* あー、同じ.cssファイルの中で同じclass名、id名って設定できるんやっていう確認
しかも、同じ属性を設定してもエラーにならなくて、後で記述したほうが適用される*/
#hoge{
   color:white;
   background:green;
}

/* overflow: auto;はデフォルトでは縦のみのスクロールバー?*/
/* 表示領域を超えたら自動でスクロールできるようになります */
/* topとかrightとかの位置はスクロールバーの位置ではなくて、表示領域全体にかかってる。そしてこっちのほうが後に記述しているのに、idの方が優先される。 */
.element{ 
	overflow-y: scroll;
    position: fixed;
    top:0;
    right:0;
}

/* スクロールバー本体 */
.element::-webkit-scrollbar{ 
	width: 50px;
	background: pink;/* startとend設定してなかったら表示される */
}


/* 中央のつまみ部分 */
/* スクロールバーの動く部分 */
.element::-webkit-scrollbar-thumb{ 
	background: yellow;
	border-radius: 2px;
}

/* スクロールバーの動く部分の前 */
.element::-webkit-scrollbar-track-piece:start{ 
	background: blue;
}
/* スクロールバーの動く部分の後ろ */
.element::-webkit-scrollbar-track-piece:end{ 
	background: red;
}

/* 横も縦もある場合の交点 */
/* スクロールバー角 */
.element::-webkit-scrollbar-corner{ 
	background: transparent;
}

/* ここから先は何か調べてない */

.element::-webkit-scrollbar:horizontal{ /* 横方向のスクロールバー本体 */
	width: 5px;
	background: #9aadfc;
}
.element::-webkit-scrollbar-thumb:horizontal{ /* 横方向のスクロールバーの動く部分 */
	background: #435295;
	border-radius: 2px;
}

var html;
for(i = 0; i < 1000; i++){
html += "あ";
}

$("div.element").html(html);

これで文字が範囲よりも長くなったら縦にのみスクロールできます。

[仕様]
・縦にのみスクロールのまま(横にはしなくていい)
・縦スクロールバーのみ自動表示
・範囲内に収まる時はスクロールバーは出さなくていい

どこをどのように修正すればよろしいでしょうか。
cssだけではできないとかでも大丈夫ですので、ご回答の程宜しくお願いいたします。

※追記
質問内容詳しく書き直しました。
コメントアウトも書いております。

色々試してみて、

/* 表示領域を超えたら自動でスクロールできるようになります */
.element{
overflow-y: scroll;
position: fixed;
top:0;
right:0;
}

のpositionの値が怪しいのではないかと思っています。

static
absolute
relative
fixed

全て試してみましたが、どれもうまく表示されません。
ただし、fixedの時だけ、画面遷移したときに一瞬だけぱっと表示されて、
すぐ消えてしまうのです。
他の何かが邪魔しているのでしょうか。
それとも、何か設定が足りないのでしょうか。

宜しくお願いいたします。

Comments

[ckaposndbbba]

-からはじまる属性は使用できますので、書き方に問題があると考えられます。
書いてみたCSSを書いていただけませんでしょうか。

[b1ackc0ffee]

質問内容詳しく書き直しました。
コメントアウトも書いております。

色々試してみて、

/* 表示領域を超えたら自動でスクロールできるようになります */
.element{
overflow-y: scroll;
position: fixed;
top:0;
right:0;
}

のpositionの値が怪しいのではないかと思っています。

static
absolute
relative
fixed

全て試してみましたが、どれもうまく表示されません。
ただし、fixedの時だけ、画面遷移したときに一瞬だけぱっと表示されて、
すぐ消えてしまうのです。
他の何かが邪魔しているのでしょうか。
それとも、何か設定が足りないのでしょうか。

宜しくお願いいたします。

Answer 1

こんにちは。
動かないということでしょうか？
こちらで試したところ動いたのですが...。http://s.codepen.io/hikaru/debug/ojVzmM
（見当違いでしたら申し訳ありません）

Comments

[b1ackc0ffee]

そうなんですよね。。
私もjsfiddleで実行したら、正常に動作するので、
現在のアプリで他のファイルが邪魔しているのではないかと思っています。

別にJSファイルがあって、
そこに下記のようなコードがあります。

//スクロール禁止
var scrollTop;
scrollTop = $(window).scrollTop();
$('body').addClass('element').css('top', (-scrollTop) + 'px');

コメントにスクロール禁止って書いているのですが、
このコードが邪魔しているわけではありませんかね？？

[ckaposndbbba]

ありがとうございます。やはりそうですか。
http://s.codepen.io/hikaru/debug/gaEgVz
これは、提示していただいたJSを入れてみたものですが、問題なく動作しています。
iOSアプリを作っているということですが、Webアプリですよね？デバッグはiOSで行っていますか？

[b1ackc0ffee]

新しいクラスができて、赤いバーが表示されるだけで、
元々のスクロールバーに影響はでていませんよね＞＜、
デバッグは、xcode、ios、iPadで行っています。

これって関係ありますかね？
>> スクロールバーが消えることがあります。 - LUNAPEDIA http://lunapedia.lunascape.jp/index.php?title=%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC%E3%81%8C%E6%B6%88%E3%81%88%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

[b1ackc0ffee]

すみません、クラス名間違っていたのが原因でしたｗｗｗ
ごめんなさい。

[ckaposndbbba]

そうでしたか(^^)自己解決できたようでよかったです。